Obsah
Efekt přetáhněte Skládá se z převzetí prvku stránky gestem myši, obvykle kliknutím na něj a přetažením uvedeného prvku do oblasti, kde jej lze uložit, a poté v závislosti na funkčnosti naší stránky dojde k nové události nebo ne.V dřívějších dobách toho bylo dosaženo pomocí Knihovny a rámce Javascriptu ve stylu jQuery, protože podpora HTML byla omezená, avšak s HTML5„Tyto funkce již máme v prohlížeči zahrnuty.
Vytváření prvků pro tažení
V dokumentu HTML musíme definovat prvky, které budou moci tento efekt použít, proto máme některé vlastnosti, které nám v tomto účelu pomohou.
Při umístění atributu přetahovatelný k prvku označujeme prohlížeči, že tento prvek může nebo nemusí být přetažen, proto má atribut hodnoty true, false a auto, jak můžeme odvodit, true říká prohlížeči, že pokud to musí být prvek, který přetáhne, v opačném případě false, deaktivuje efekt a automaticky řekne prohlížeči, aby se rozhodl, zda aktivuje samotný efekt.
Doporučuje se použít true nebo false k výslovnému označení, zda je efekt aktivován, nebo ne, protože ačkoli většina prohlížečů interpretuje hodnotu auto jako true, neměli bychom nechat průběh naší stránky třetím stranám.
Události přetažení
Než přejdeme k příkladu, definujeme další důležitou charakteristiku přetahování prvku, a to, že při zahájení tažení prvku máme 3 události, které můžeme identifikovat a pomocí kterých můžeme provádět různé zpracování, pokud chceme , tyto události jsou:
dragstart, je začátek události tažení při umístění myši nad prvek, kliknutí a spuštění přetažení uvedeného prvku.
táhnout, stane se to po dragstartu a trvá celou cestu, kdy prvek přetahujeme.
přetáhnout, nastane v okamžiku, kdy položku přestaneme přetahovat, ať už ji necháme v oblasti uložení, nebo jsme činili pokání a přestali ji přetahovat do poloviny.
Přetažení implementace
Podívejme se níže na příklad toho, jak všechny výše uvedené stránky začleníme do stránky, vytvoříme seznam prvků, ke kterým přiřadíme přetažitelný atribut jako true, vytvoříme některé třídy css, které nám umožní upravit jejich styly a nakonec s událostmi zmíněnými při přetahování prvku změní jeho barvu.
Podívejme se na kód:
Příklad
Vložte zde
Jak to nyní vypadá v našem prohlížeči:
