jak přetáhnout HTML prvky a soubory pomocí JavaScriptu

Chcete-li definovat drop efekt, je třeba dodržovat následující kroky:

5.1. Určení Povolených Drop Efekt(y) na Draggable Prvkem je Událost dragstart Handler

Pomocí effectAllowed vlastnost dataTransfer události nemovitost, můžete definovat všechny drop účinky, které mohou být použity pro to přetáhnout prvek.

to se provádí tak, jak lze definovat různá místa poklesu a různé efekty poklesu lze zpracovat na místo poklesu.,

následující tabulka definuje možné effectAllowed majetkové hodnoty na základě MDN docs:

5.2. Za každé Umístění na zem, Definovat Drop Efekt(y) za to, že je to dragover Event Handler

být definována drop efekt, musí být jedním z povolených účinků stanovena na dragstart obslužné rutiny události ze zdrojového umístění.,

pokud efekt poklesu není jedním z povolených efektů poklesu, bude nastaven na jeden z povolených efektů poklesu.

dragover handler, kde pokles efekt by měl být definován, je proveden, když táhl prvek je přetáhnout přes možný pokles umístění.

následující příklad je definování efektů poklesu pro konkrétní místo poklesu.

6) Definovat seskoku (Drop Umístění)

ve výchozím nastavení, žádný element v dokumentu HTML umožňuje drop., Nicméně, to může být změněna, a tak, aby prvek drop zone, musí mít:

• ondragover obslužné rutiny události, která je spuštěna, když je přetáhnout prvek je vlečen přes tento prvek. V tomto případě handler, pokles efekt místa poklesu je definován, jak bylo uvedeno výše v kroku 5.2.
• ondrop obslužné rutiny události, která je spuštěna, když je přetáhnout prvek je zrušen v drag umístění/zóny.

níže je uveden příklad definování prvku jako místa poklesu.,

iv id= “ 063cb73b89

Pokud bude kapka povolena pouze v určitých situacích, kdy jsou použity podmínky, přidejte pouze preventDefault, pokud jsou splněny podmínky pro povolení kapky. To se provádí, aby se zabránilo tomu, že prvek bude kapkovou zónou, pokud nejsou splněny podmínky, kde by neměl být povolen pokles.,

odmítnutí kapky na základě typu dat drag ve vlastnosti dataTransfer je běžný případ. Následující příklad ukazuje, že povolením pouze odkazy, které mají být vynechány v drop zone prvku, který má dragover handler.

7) Rukojeť Prvku Drop

Během drop událost, přetáhněte údaje by měly být zpracovávány. K tomu se používá metoda getData() na vlastnosti události dataTransfer.,

metoda getData() načte položky drag, protože k načtení trvá jediný argument typu dat a vrátí s ním přiřazenou hodnotu řetězce.

povolené vlastnosti effect a dropEffect pomáhají řídit zpětnou vazbu, která bude uživateli předložena.

zpracování takové zpětné vazby je odpovědností vývojáře a mělo by být implementováno v handleru událostí drop. Například načtení prvku a jeho připojení k jinému rodiči jej přesune, ale kopírování uzlu bude mít za následek efekt kopírování.,

Pokud více kapka účinky jsou definovány pro jeden drop zone, dropEffect majetek by měl být použit k zjistit, které operace přetažení byla žádoucí pro tento konkrétní drop akce.

níže je uveden příklad manipulace s kapkou.

Někdy můžete mít podporovány různé typy téhož data, ale pouze chtějí získat co nejvíce konkrétní typ. Ukazuje to následující kód z dokumentů MDN.,

8) Použít Událost dragend Zkontrolovat, zda Pokles byl Úspěšný

Na konci operace přetažení, dragend události požáry na zdrojový prvek. Událost vyvolá, zda byl tah úspěšný nebo byl zrušen.

zkontrolujte, zda operace přetažení byla úspěšná, nebo ne, hodnota dropEffect může být kontrolovány, jako je následující:

• Pokud dropEffect vlastnost hodnota je „none“ v dragend event handler, pak to znamená, drag operace byla zrušena.,
• jinak je hodnota vlastnosti dropEffect operace, která byla úspěšně provedena.

Hmm, tak jak je to užitečné?

zdrojový prvek může tyto informace použít po úspěšné operaci přesunu k odstranění přetažené položky ze starého umístění.

Demo na HTML Element, je Drag &

Poznámka: můžete také klonovat projekt z mé Github.,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2) Definovat seskoku (Drop Umístění)

ve výchozím nastavení, žádný element v dokumentu HTML umožňuje drop. Nicméně, to může být změněna, a tak, aby prvek drop zone, musí mít:

• ondragover obslužné rutiny události, která je spuštěna, když je soubor(y) je/jsou taženy přes pokles umístění.
• obslužný program událostí ondrop, který je spuštěn, když je soubor/soubory vynechán v místě poklesu.,

jak uvádí MDN docs:

události dragstart a dragend nejsou vypáleny při přetahování souboru do prohlížeče z operačního systému.

níže je uveden příklad pro definování prvku jako místa poklesu.