Přesun html uzlů pomocí css rubrika: Kódování: CSS

6 Andreaw Fean
položil/-a 20.12.2019

Ahoj.

Mám takovouto struktůru:

<div class="box">
  <input name="name" />
  <input name="surname" />
</div>
<div class="box">
  <input name="title" />
</div>

A já bych chtěl ten element div.box > [name="title"] přesunout do toho prvého boxu před input[name="surname"]. Tak samozřejmě bych to udělal pomocí javascriptu. Ale existuje nějaká technika, nebo třeba jen prototyp návrhu, jak takhle pomocí css stěhovat prvky?

Potřeboval bych takovéhle scénáře:

  • přesunout před
  • přesunout za
  • zduplikovat před
  • zduplikovat za

Možná bych vymyslel ještě nějaké další.

Díky

odkaz Vyřešeno
4 jtojnar
odpověděl/-a 27.12.2019
 
upravil/-a 27.12.2019

Jen pro zajímavost, [CSS Images Module Level 4](https://drafts.csswg.org/css-images-4/#element-notation) definuje operátor element() který jde využít k podobnému účelu. Původně jej snad mělo být možné použít ve vlastnosti [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content), ale zdá se, že to nikdo neimplementoval; jen Firefox to podporuje s prefixem a jen pro [pozadí](https://developer.mozilla.org/en-US/docs/Web/CSS/background). A taky už specifikace říká, že to přenáší jen zjev prvku, ne prvek samotný, takže se to tady neuplatní (s „klonovaným“ prvkem nelze interagovat a originál nelze skrýt běžným způsobem, jinak zmizí i kopie).

Demo: https://jsfiddle.net/jtojnar/8ncz5g1v/
Příklad rozumného použití: https://css-tricks.com/using-the-little-known-css-element-function-to-cr...

Vybavuji si, že jsem kdysi četl i o silnější možnosti transplantace celého prvku do libovolného jiného prvku ve stránce, ale nemůžu to nikde najít. Buď se to rozhodli neimplementovat z důvodů výkonu a zmizelo to z indexů, zadávám špatná klíčová slova, nebo, nejpravděpodobněji, mě šálí paměť.

Komentáře

  • Andreaw Fean : Zajímavé díky. To jsem nezmínil, že mě zajímá jenom vzhled. Třeba to, že naklonuju nějaký checkbox znamená, že je dvakrát, ale když zaškrtnu jeden, tak se zaškrtne i ten druhej. Atd. 27.12.2019

Pro zobrazení všech 5 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.