Ako používať rozhranie HTML Drag and Drop API

Drag and drop je základná funkcia, ktorá zlepšuje interakciu používateľa a uľahčuje bezproblémovú používateľskú skúsenosť. Či už chcete vytvoriť nástroj na nahrávanie súborov, zoznam na zoradenie alebo interaktívnu hru, Pochopenie toho, ako využiť možnosti tohto API, je kľúčovou zručnosťou, ktorú musíte mať na svojom webe vývojový nástroj.

Základy drag and drop v HTML

V typickom systéme drag-and-drop existujú dva typy prvkov: prvý typ obsahuje preťahovateľné prvky, ktoré používatelia sa môže pohybovať pomocou myši a druhý typ obsahuje prvky, ktoré možno spúšťať, ktoré zvyčajne určujú, kam môžu používatelia umiestniť element.

Ak chcete implementovať drag and drop, musíte prehliadaču povedať, ktoré prvky chcete pretiahnuť. Ak chcete, aby používateľ mohol prvok presúvať, mal by mať prvok a ťahateľnéHTML atribút nastavený na pravda, Páči sa ti to:

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

Keď používateľ spustí udalosť ťahania, prehliadač poskytne predvolený obrázok „duchov“, ktorý zvyčajne poskytuje spätnú väzbu týkajúcu sa prvku, ktorý sa ťahá.

Tento obrázok môžete prispôsobiť zadaním vlastného obrázka. Ak to chcete urobiť, vyberte z modelu DOM prvok, ktorý možno presunúť, vytvorte nový obrázok, ktorý bude reprezentovať vlastný obrázok spätnej väzby, a pridajte dragstart potiahnite poslucháč udalosti 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);
})

Vo vyššie uvedenom bloku kódu je setDragImage metóda má tri parametre. Prvý parameter odkazuje na obrázok. Ostatné parametre predstavujú horizontálne a vertikálne posuny obrazu. Keď spustíte kód v prehliadači a začnete ťahať prvok, všimnete si, že vlastný obrázok pretiahnutia bol nahradený už predtým nastaveným vlastným obrázkom.

Ak chcete povoliť pokles, musíte zabrániť predvolenému správaniu zrušením oboch dragenter a dragover udalosti, ako je toto:

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

Pochopenie rozhrania DragEvent

Funkcie JavaScriptu a DragEvent rozhranie, ktoré predstavuje interakciu používateľa pretiahnutím myšou. Nižšie je uvedený zoznam možných typov udalostí pod DragEvent rozhranie.

• ťahať: Používateľ spustí túto udalosť pri ťahaní prvku.
• dragend: Táto udalosť sa spustí, keď sa operácia ťahania skončí alebo keď ju používateľ preruší. Typická operácia ťahania môže skončiť uvoľnením tlačidla myši alebo stlačením klávesu Escape.
• dragenter: Presunutý prvok spustí túto udalosť, keď vstúpi do platného cieľa spustenia.
• dragleave: Keď ťahaný prvok opustí cieľ spustenia, spustí sa táto udalosť.
• dragover: Keď používateľ potiahne presúvateľný prvok cez cieľ spustenia, udalosť sa spustí.
• dragstart: Udalosť sa spustí na začiatku operácie ťahania.
• pokles: Používateľ spustí túto udalosť, keď umiestni prvok na cieľ presunutia.

Pri pretiahnutí súboru do prehliadača z prostredia mimo prehliadača (napríklad správcu súborov operačného systému) prehliadač nespustí dragstart alebo dragend diania.

DragEvent sa môže hodiť, ak chcete odoslať vlastnú udalosť ťahania programovo. Napríklad, ak chcete a div Ak chcete spustiť vlastné udalosti presúvania pri načítaní stránky, postupujte takto. Najprv vytvorte nový zvyk DragEvent() Páči sa ti to:

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

Vo vyššie uvedenom bloku kódu customDragStartEvent predstavuje inštanciu DragEvent(). In customDragStartEvent, existujú dva argumenty konštruktéra. Prvý predstavuje typ udalosti ťahania, ktorý môže byť jedným zo siedmich typov udalostí uvedených vyššie.

Druhým argumentom je objekt s a prenos dát kľúč predstavujúci inštanciu Prenos dát, o ktorej sa dozviete viac neskôr v tejto príručke. Potom uchopte prvok, z ktorého chcete spustiť udalosť, z Model objektu dokumentu (DOM).

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

Potom pridajte poslucháčov udalosti takto:

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

V prvom poslucháčovi udalostí vyššie funkcia spätného volania zaznamená text „Pretiahnutie začalo!“ a dovoláva sa setData metóda na prenos dát nehnuteľnosť na udalosť objekt. Teraz môžete spustiť vlastné udalosti takto:

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

Prenos dát pomocou DataTransfer

The prenos dát objekt slúži ako most medzi zdrojovým prvkom (pretiahnuteľná položka) a cieľovým prvkom (oblasť s možnosťou pustenia) počas operácie presúvania myšou. Funguje ako dočasný úložný kontajner pre údaje, ktoré chcete zdieľať medzi týmito prvkami.

Tieto údaje môžu mať rôzne formy, napríklad text, adresy URL alebo vlastné typy údajov, čo z nich robí všestranný nástroj na implementáciu širokej škály funkcií presúvania myšou.

Použitie setData() na balenie údajov

Na prenos údajov z presúvateľného prvku do prvku s možnosťou pustenia použijete setData() spôsob poskytovaný spoločnosťou prenos dát objekt. Táto metóda vám umožňuje zbaliť údaje, ktoré chcete preniesť, a určiť typ údajov. Tu je základný príklad:

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

Keď používateľ začne ťahať určený prvok, setData() balí text "Ahoj, svet!" s typom údajov text/obyčajný. Tieto údaje sú teraz priradené k udalosti presunutia a môžu k nim pristupovať cieľ, ktorý možno pustiť počas operácie presunutia.

Získavanie údajov pomocou funkcie getData()

Na prijímacej strane, v rámci poslucháča udalostí prvku s možnosťou voľby, môžete získať prenesené údaje pomocou getData() metóda:

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

Vyššie uvedený blok kódu získava údaje s rovnakým typom údajov (text/obyčajný), ktorý bol nastavený pomocou setData() metóda skôr. To vám umožňuje pristupovať k prenášaným údajom a manipulovať s nimi podľa potreby v kontexte prvku, ktorý možno zahodiť.

Prípady použitia pre rozhrania drag and drop

Integrácia funkcie drag-and-drop do vašich webových aplikácií môže byť silným vylepšením, ale je nevyhnutné pochopiť, kedy a prečo by ste ju mali implementovať.

• Nástroje na nahrávanie súborov: Umožnenie používateľom presúvať súbory priamo z pracovnej plochy alebo správcu súborov do vyhradenej oblasti presunu zjednodušuje proces nahrávania.
• Triediteľné zoznamy: Ak vaša aplikácia obsahuje zoznamy položiek, ako sú zoznamy úloh, zoznamy skladieb alebo galérie obrázkov, používatelia môžu oceniť možnosť meniť poradie položiek pomocou presunutia myšou.
• Interaktívne informačné panely: Pre nástroje na vizualizáciu dát a reporting, drag and drop môže byť pre používateľov účinným spôsobom, ako si prispôsobiť svoje informačné panely preskupením miniaplikácií a grafov.

Majte na pamäti dostupnosť

Pretiahnutie môže byť síce vizuálne príťažlivé a môže zlepšiť používateľskú skúsenosť, no je dôležité zabezpečiť, aby vaša implementácia zostala prístupná všetkým používateľom vrátane tých so zdravotným postihnutím. Poskytnite alternatívne metódy interakcie, ako napríklad ovládacie prvky klávesnice, aby bola vaša aplikácia zahrnutá.