Obsah
Již v první části tohoto tutoriálu jsme viděli, jak spustit událost přetažení tažení prvků, to znamená, že jsme udělali část práce, viděli jsme, jak interagovat s různými událostmi té první sekce.Nyní musíme vědět, jak aktivovat oblast, kam prvek uložit, je to již komplementární akce, která nám umožní dosáhnout úplných funkcí na naší stránce.
Vytvoření oblasti uložení
Toto je oblast, kde opustíme prvky, které přetáhneme, abychom mohli manipulovat s touto oblastí, budeme mít několik událostí. Abychom lépe porozuměli tomu, jak s těmito událostmi zacházet, uvedeme každou z nich a vysvětlíme, jak to funguje .
Události
- Dragenter: Aktivuje se, když přetažený prvek vstoupí do prostoru na obrazovce, který jsme definovali pro oblast uložení.
- Dragover: Spustí se, když se přetažený prvek pohybuje v oblasti uložení, kterou jsme již definovali.
- Dragleave: Aktivuje se v okamžiku, kdy přetažený prvek opustí oblast uložení.
- Pokles: Je to událost, která se aktivuje, když je položka ponechána v oblasti uložení.
Jakmile víme, jaké události máme k dispozici, vytvoříme jednoduchý kód, ve kterém se při upuštění nebo uložení prvku, který jsme přetáhli, zobrazí v oblasti uložení.
K tomu použijeme některé funkce vnitřní HTML kde budeme klonovat prvek, který je vržen do oblasti.
Podívejme se na ukázkový kód:
Příklad
Přetáhněte sem
Podíváme -li se pozorně, definujeme cílový prvek jako prvek, který bude obsahovat oblast uložení, jakmile to bude hotovo, definujeme, co se stane v každé z událostí, pokud se podíváme na pádová událost je místo, kde nastává poslední krok, zde budeme klonovat přetažený prvek a díky vnitřní HTML ukážeme to asynchronně, když upustíme prvek, který jsme přetahovali.
Další věc, které musíme věnovat pozornost, je přepsat výchozí událost prohlížeče, to zvládáme při vytváření funkce handleDragTímto způsobem zabráníme prohlížeči interpretovat pokyny způsobem, který od nás neočekáváme.
V našem prohlížeči by to mělo vypadat takto:
