Kako koristiti HTML Drag and Drop API

Povuci i ispusti bitna je značajka koja poboljšava korisničku interakciju i olakšava besprijekorno korisničko iskustvo. Bilo da želite izgraditi alat za učitavanje datoteka, popis koji se može sortirati ili interaktivnu igru, razumijevanje kako iskoristiti mogućnosti ovog API-ja ključna je vještina koju morate imati na webu razvojni alat.

Osnove povlačenja i ispuštanja u HTML-u

U tipičnom sustavu povlačenja i ispuštanja postoje dvije vrste elemenata: prvi tip obuhvaća elemente koji se mogu povlačiti koje korisnici može se pomicati mišem, a druga vrsta uključuje elemente koji se mogu ispustiti i koji obično određuju gdje korisnici mogu postaviti element.

Da biste implementirali povlačenje i ispuštanje, morate reći pregledniku koje elemente želite povlačiti. Da bi korisnik mogao povlačiti element, taj bi element trebao imati a povlačeći seHTML atribut postavljen pravi, kao ovo:

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

Kada korisnik počne pokretati događaj povlačenja, preglednik isporučuje zadanu sliku "duha" koja obično daje povratne informacije o elementu koji se povlači.

Ovu sliku možete prilagoditi tako da umjesto nje unesete svoju sliku. Da biste to učinili, odaberite element koji se može povlačiti iz DOM-a, izradite novu sliku koja će predstavljati prilagođenu sliku povratne informacije i dodajte dragstart povucite slušatelja događaja ovako:

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);
})

U gornjem bloku koda, setDragImage metoda ima tri parametra. Prvi parametar odnosi se na sliku. Ostali parametri predstavljaju vodoravne i okomite pomake slike. Kada pokrenete kod u pregledniku i počnete povlačiti element, primijetit ćete da je prilagođena slika za povlačenje zamijenjena prethodno postavljenom prilagođenom slikom.

Ako želite dopustiti pad, morate spriječiti zadano ponašanje otkazivanjem oba dragenter i dragover događaji, poput ovog:

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

Razumijevanje sučelja DragEvent

Značajke JavaScripta a DragEvent sučelje koje predstavlja povuci i ispusti interakciju korisnika. Ispod je popis mogućih vrsta događaja pod DragEvent sučelje.

• opterećenje: Korisnik aktivira ovaj događaj dok povlači element.
• dragend: Ovaj se događaj pokreće kada operacija povlačenja završi ili kada je korisnik prekine. Tipična operacija povlačenja može završiti otpuštanjem tipke miša ili pritiskom tipke za izlaz.
• dragenter: Povučeni element pokreće ovaj događaj kada uđe u važeći cilj ispuštanja.
• prevući: Kada povučeni element napusti cilj ispuštanja, aktivira se ovaj događaj.
• dragover: Kada korisnik povuče element koji se može povlačiti preko cilja pada, aktivira se događaj.
• dragstart: Događaj se pokreće na početku operacije povlačenja.
• pad: Korisnik pokreće ovaj događaj kada ispusti element na cilj ispuštanja.

Prilikom povlačenja datoteke u preglednik iz okruženja izvan preglednika (na primjer, upravitelja datoteka operacijskog sustava), preglednik ne pokreće dragstart ili dragend događanja.

DragEvent može dobro doći ako želite programski poslati prilagođeni događaj povlačenja. Na primjer, ako želite a div da aktivirate prilagođene događaje povlačenja pri učitavanju stranice, evo kako to možete učiniti. Najprije stvorite novi običaj DragEvent() kao ovo:

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

U gornjem bloku koda, customDragStartEvent predstavlja primjerak DragEvent(). U customDragStartEvent, postoje dva argumenta konstruktora. Prvi predstavlja tip događaja povlačenja, koji može biti jedan od sedam ranije spomenutih tipova događaja.

Drugi argument je objekt s a Prijenos podataka ključ koji predstavlja instancu Prijenos podataka, o čemu ćete više saznati kasnije u ovom vodiču. Zatim zgrabite element iz kojeg želite pokrenuti događaj, iz Objektni model dokumenta (DOM).

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

Zatim dodajte slušatelje događaja ovako:

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

U prvom slušatelju događaja iznad, značajka funkcije povratnog poziva bilježi tekst "Povlačenje je počelo!" i poziva na setData metoda na Prijenos podataka vlasništvo na događaj objekt. Sada možete pokrenuti prilagođene događaje ovako:

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

Prijenos podataka pomoću dataTransfer

The Prijenos podataka Objekt služi kao most između izvornog elementa (stavka koja se može povući) i ciljnog elementa (područje koje se može ispustiti) tijekom operacije povlačenja i ispuštanja. Djeluje kao privremeni spremnik za pohranu podataka koje želite dijeliti između ovih elemenata.

Ovi podaci mogu imati različite oblike, kao što su tekst, URL-ovi ili prilagođene vrste podataka, što ih čini svestranim alatom za implementaciju širokog raspona funkcija povlačenja i ispuštanja.

Korištenje setData() za paket podataka

Za prijenos podataka iz elementa koji se može povlačiti u onaj koji se može ispuštati, upotrijebit ćete setData() metoda koju pruža Prijenos podataka objekt. Ova metoda vam omogućuje pakiranje podataka koje želite prenijeti i određivanje vrste podataka. Evo osnovnog primjera:

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

Kada korisnik počne povlačiti navedeni element, setData() pakira tekst "Hello, world!" s tipom podataka tekst/običan. Ovi su podaci sada povezani s događajem povlačenja i može im pristupiti cilj koji se može ispustiti tijekom operacije ispuštanja.

Dohvaćanje podataka s getData()

Na primateljskoj strani, unutar slušatelja događaja elementa koji se može ispustiti, možete dohvatiti prenesene podatke pomoću getData() metoda:

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

Gore navedeni blok koda dohvaća podatke s istom vrstom podataka (tekst/običan) koji je postavljen pomoću setData() ranija metoda. To vam omogućuje pristup i manipuliranje prenesenim podacima prema potrebi unutar konteksta elementa koji se može ispustiti.

Slučajevi korištenja za sučelja povuci i ispusti

Integracija funkcije povuci i ispusti u svoje web aplikacije može biti moćno poboljšanje, ali bitno je razumjeti kada i zašto biste je trebali implementirati.

• Učitavači datoteka: Omogućavanje korisnicima da povlače datoteke izravno sa svoje radne površine ili upravitelja datotekama u određeno područje za ispuštanje pojednostavljuje proces učitavanja.
• Popisi koji se mogu sortirati: Ako vaša aplikacija uključuje popise stavki, kao što su popisi zadataka, popisi za reprodukciju ili galerije slika, korisnici bi mogli cijeniti mogućnost promjene redoslijeda stavki povlačenjem i ispuštanjem.
• Interaktivne nadzorne ploče: Za alati za vizualizaciju podataka i izvješćivanje, povlačenje i ispuštanje može biti moćan način za korisnike da prilagode svoje nadzorne ploče preuređivanjem widgeta i grafikona.

Imajući na umu pristupačnost

Iako povlačenje i ispuštanje može biti vizualno privlačno i poboljšati korisničko iskustvo, ključno je osigurati da vaša implementacija ostane dostupna svim korisnicima, uključujući one s invaliditetom. Pružite alternativne metode za interakciju, kao što su kontrole tipkovnice, kako bi vaša aplikacija bila inkluzivna.