Implementace funkce drag-and-drop je jednodušší, než si myslíte. Jak na to, se dozvíte v tomto užitečném průvodci.

Drag and drop je základní funkce, která zlepšuje interakci uživatele a usnadňuje bezproblémový uživatelský zážitek. Ať už chcete vytvořit nástroj pro nahrávání souborů, seznam seřadit nebo interaktivní hru, porozumění tomu, jak využít možnosti tohoto API, je klíčovou dovedností, kterou musíte mít na svém webu vývojový nástroj.

Základy drag and drop v HTML

V typickém systému drag-and-drop existují dva typy prvků: první typ obsahuje přetahovatelné prvky, které uživatelé se může pohybovat pomocí myši a druhý typ obsahuje stahovací prvky, které obvykle určují, kam mohou uživatelé umístit živel.

Chcete-li implementovat drag and drop, musíte prohlížeči sdělit, jaké prvky chcete přetáhnout. Aby uživatel mohl prvek přetáhnout, měl by mít prvek a přetahovatelnéHTML atribut nastaven na skutečný, takhle:

<divdraggable="true">This element is draggablediv>

Když uživatel spustí událost přetažení, prohlížeč poskytne výchozí obrázek „duch“, který obvykle poskytuje zpětnou vazbu týkající se přetahovaného prvku.

instagram viewer

Tento obrázek můžete upravit tak, že místo něj dodáte svůj vlastní obrázek. Chcete-li to provést, vyberte přetahovatelný prvek z modelu DOM, vytvořte nový obrázek, který bude představovat vlastní obrázek zpětné vazby, a přidejte dragstart přetáhněte posluchač události takto:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

Ve výše uvedeném bloku kódu je setDragImage metoda má tři parametry. První parametr odkazuje na obrázek. Ostatní parametry představují horizontální a vertikální ofsety obrazu. Když spustíte kód v prohlížeči a začnete přetahovat prvek, všimnete si, že vlastní obrázek přetažení byl nahrazen dříve sadou vlastních obrázků.

Pokud chcete povolit pokles, musíte zabránit výchozímu chování zrušením obou dragenter a dragover události, jako je tato:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Pochopení rozhraní DragEvent

Funkce JavaScriptu a DragEvent rozhraní, které představuje interakci uživatele přetažením. Níže je uveden seznam možných typů událostí pod DragEvent rozhraní.

  • táhnout: Uživatel spustí tuto událost při přetahování prvku.
  • dragend: Tato událost se spustí, když operace přetažení skončí nebo když ji uživatel přeruší. Typická operace přetažení může skončit uvolněním tlačítka myši nebo stisknutím klávesy Escape.
  • dragenter: Přetažený prvek spustí tuto událost, když vstoupí do platného cíle přetažení.
  • dragleave: Tato událost se spustí, když tažený prvek opustí cíl shození.
  • dragover: Když uživatel přetáhne přetahovatelný prvek přes cíl přetažení, událost se spustí.
  • dragstart: Událost se spustí na začátku operace přetažení.
  • pokles: Uživatel spustí tuto událost, když upustí prvek na cíl upuštění.

Při přetahování souboru do prohlížeče z prostředí mimo prohlížeč (například správce souborů operačního systému) prohlížeč nespustí dragstart nebo dragend Události.

DragEvent se může hodit, pokud chcete programově odeslat vlastní událost přetažení. Například, pokud chcete a div Chcete-li spustit vlastní události přetažení při načtení stránky, postupujte takto. Nejprve vytvořte nový vlastní DragEvent() takhle:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

V bloku kódu výše customDragStartEvent představuje instanci DragEvent(). v customDragStartEvent, existují dva argumenty konstruktoru. První představuje typ události přetažení, což může být jeden ze sedmi typů událostí zmíněných dříve.

Druhý argument je objekt s a přenos dat klíč představující instanci Přenos dat, o kterém se více dozvíte později v této příručce. Dále uchopte prvek, ze kterého chcete událost spustit, z Objektový model dokumentu (DOM).

const draggableElement = document.querySelector("#draggable");

Pak přidejte, posluchači událostí takto:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

V prvním posluchači událostí výše funkce zpětného volání zaprotokoluje text "Přetažení zahájeno!" a dovolává se setData metoda na přenos dat nemovitost na událost objekt. Nyní můžete spouštět vlastní události takto:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Přenos dat pomocí DataTransfer

The přenos dat objekt slouží jako most mezi zdrojovým prvkem (přetahovatelná položka) a cílovým prvkem (rozkládací oblast) během operace přetažení. Funguje jako dočasný úložný kontejner pro data, která chcete mezi těmito prvky sdílet.

Tato data mohou mít různé formy, jako je text, adresy URL nebo vlastní datové typy, což z nich činí všestranný nástroj pro implementaci široké škály funkcí přetahování.

Použití setData() ke sbalení dat

Chcete-li přenést data z přetahovatelného prvku do prvku s možností přetažení, použijete setData() metoda poskytovaná společností přenos dat objekt. Tato metoda umožňuje zabalit data, která chcete přenést, a určit typ dat. Zde je základní příklad:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Když uživatel začne přetahovat určený prvek, setData() balí text "Ahoj, světe!" s datovým typem text/prostý. Tato data jsou nyní spojena s událostí přetažení a může k nim přistupovat cíl, který lze upustit během operace přetažení.

Načítání dat pomocí getData()

Na přijímací straně, v rámci posluchače událostí prvku s možností přetažení, můžete načíst přenesená data pomocí getData() metoda:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Blok kódu výše načte data se stejným typem dat (text/prostý), který byl nastaven pomocí setData() metoda dříve. To vám umožňuje přistupovat k přenášeným datům a manipulovat s nimi podle potřeby v rámci kontextu rozbalitelného prvku.

Případy použití pro rozhraní Drag and Drop

Integrace funkcí přetahování do vašich webových aplikací může být silným vylepšením, ale je nezbytné pochopit, kdy a proč byste ji měli implementovat.

  • Programy pro nahrávání souborů: Umožnění uživatelům přetahovat soubory přímo z plochy nebo správce souborů do určené oblasti přetažení zjednodušuje proces nahrávání.
  • Seřaditelné seznamy: Pokud vaše aplikace obsahuje seznamy položek, jako jsou seznamy úkolů, seznamy skladeb nebo galerie obrázků, uživatelé mohou ocenit možnost změnit pořadí položek přetažením.
  • Interaktivní řídicí panely: Pro nástroje pro vizualizaci dat a reportování, drag and drop může být pro uživatele účinným způsobem, jak si přizpůsobit své řídicí panely přeskupením widgetů a grafů.

Mějte na paměti přístupnost

Přestože přetažení může být vizuálně přitažlivé a může zlepšit uživatelský dojem, je důležité zajistit, aby vaše implementace zůstala přístupná všem uživatelům, včetně těch s postižením. Poskytněte alternativní metody interakce, jako jsou ovládací prvky klávesnice, aby byla vaše aplikace inkluzivní.