Kako uporabljati API za povleci in spusti HTML

Povleci in spusti je bistvena funkcija, ki izboljša uporabniško interakcijo in omogoča brezhibno uporabniško izkušnjo. Ne glede na to, ali želite ustvariti program za nalaganje datotek, seznam, ki ga je mogoče razvrstiti, ali interaktivno igro, razumevanje, kako izkoristiti zmogljivosti tega API-ja, je ključna veščina, ki jo morate imeti v svojem spletu komplet razvojnih orodij.

Osnove povleci in spusti v HTML

V tipičnem sistemu povleci in spusti obstajata dve vrsti elementov: prva vrsta obsega elemente, ki jih je mogoče povleči in jih uporabniki se lahko premika z miško, druga vrsta pa vključuje elemente, ki jih je mogoče spustiti in običajno določajo, kam lahko uporabniki postavijo element.

Če želite izvesti povleci in spusti, morate brskalniku povedati, katere elemente želite, da jih je mogoče povleči. Če želite, da lahko uporabnik povleče element, mora imeti ta element a vlečenjeHTML atribut nastavljena prav, Všečkaj to:

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

Ko uporabnik začne sprožati dogodek vlečenja, brskalnik posreduje privzeto sliko »duha«, ki običajno zagotavlja povratne informacije o elementu, ki se vleče.

To sliko lahko prilagodite tako, da namesto nje vnesete svojo sliko. Če želite to narediti, izberite element, ki ga je mogoče povleči iz DOM, ustvarite novo sliko, ki bo predstavljala sliko povratnih informacij po meri, in dodajte dragstart poslušalec dogodkov povlecite takole:

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

V zgornjem bloku kode je setDragImage Metoda ima tri parametre. Prvi parameter se nanaša na sliko. Drugi parametri predstavljajo vodoravni in navpični odmik slike. Ko zaženete kodo v brskalniku in začnete vleči element, boste opazili, da je bila slika za vlečenje po meri zamenjana s prej nastavljeno sliko po meri.

Če želite dovoliti padec, morate preprečiti privzeto vedenje tako, da prekličete oba dragenter in dragover dogodki, kot je ta:

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

Razumevanje vmesnika DragEvent

Funkcije JavaScript a DragEvent vmesnik, ki predstavlja interakcijo uporabnika povleci in spusti. Spodaj je seznam možnih vrst dogodkov pod DragEvent vmesnik.

• povlecite: uporabnik sproži ta dogodek med vlečenjem elementa.
• dragend: Ta dogodek se sproži, ko se operacija vlečenja konča ali ko jo uporabnik prekine. Običajna operacija vlečenja se lahko konča tako, da spustite gumb miške ali pritisnete tipko za izhod.
• dragenter: Povlečeni element sproži ta dogodek, ko vstopi v veljaven cilj spuščanja.
• vlečenje: Ko vlečeni element zapusti spustni cilj, se sproži ta dogodek.
• dragover: Ko uporabnik povleče element, ki ga je mogoče povleči, preko cilja za spuščanje, se sproži dogodek.
• dragstart: dogodek se sproži na začetku operacije vlečenja.
• padec: uporabnik sproži ta dogodek, ko spusti element na cilj spuščanja.

Ko povlečete datoteko v brskalnik iz okolja zunaj brskalnika (na primer iz upravitelja datotek operacijskega sistema), brskalnik ne sproži dragstart oz dragend dogodkov.

DragEvent lahko pride prav, če želite programsko poslati dogodek vlečenja po meri. Na primer, če želite a div če želite ob nalaganju strani sprožiti dogodke vlečenja po meri, to storite tukaj. Najprej ustvarite novo po meri DragEvent() Všečkaj to:

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

V zgornjem kodnem bloku customDragStartEvent predstavlja primerek DragEvent(). notri customDragStartEventobstajata dva argumenta konstruktorja. Prvi predstavlja tip dogodka vlečenja, ki je lahko eden od sedmih prej omenjenih tipov dogodkov.

Drugi argument je objekt z a prenos podatkov ključ, ki predstavlja primerek Prenos podatkov, o čemer boste izvedeli več kasneje v tem priročniku. Nato zgrabite element, iz katerega želite sprožiti dogodek, iz Objektni model dokumenta (DOM).

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

Nato dodajte poslušalce dogodkov takole:

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

V prvem poslušalcu dogodkov zgoraj funkcija funkcije povratnega klica zabeleži besedilo "Vlečenje se je začelo!" in prikliče setData metoda na prenos podatkov lastnina na dogodek predmet. Zdaj lahko sprožite dogodke po meri, kot je ta:

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

Prenos podatkov s funkcijo dataTransfer

The prenos podatkov Služi kot most med izvornim elementom (predmetom, ki ga je mogoče povleči) in ciljnim elementom (območje, ki ga je mogoče spustiti) med operacijo povleci in spusti. Deluje kot začasni vsebnik za shranjevanje podatkov, ki jih želite deliti med temi elementi.

Ti podatki imajo lahko različne oblike, kot so besedilo, URL-ji ali tipi podatkov po meri, zaradi česar so vsestransko orodje za izvajanje širokega nabora funkcij povleci in spusti.

Uporaba setData() za paketne podatke

Za prenos podatkov iz elementa, ki ga je mogoče povleči, v element, ki ga je mogoče spustiti, boste uporabili setData() metoda, ki jo zagotavlja prenos podatkov predmet. Ta metoda vam omogoča, da zapakirate podatke, ki jih želite prenesti, in določite vrsto podatkov. Tukaj je osnovni primer:

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

Ko uporabnik začne vleči podani element, setData() pakira besedilo "Pozdravljen, svet!" z vrsto podatkov besedilo/navadno. Ti podatki so zdaj povezani z dogodkom vlečenja in do njih lahko dostopa cilj, ki ga je mogoče spustiti, med operacijo spuščanja.

Pridobivanje podatkov z getData()

Na prejemnem koncu lahko znotraj poslušalca dogodkov elementa, ki ga je mogoče spustiti, pridobite prenesene podatke z getData() metoda:

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

Zgornji blok kode pridobi podatke z isto vrsto podatkov (besedilo/navadno), ki je bil nastavljen z uporabo setData() metoda prej. To vam omogoča dostop do prenesenih podatkov in njihovo upravljanje po potrebi znotraj konteksta elementa, ki ga je mogoče spustiti.

Primeri uporabe za vmesnike povleci in spusti

Integracija funkcije povleci in spusti v vaše spletne aplikacije je lahko močna izboljšava, vendar je nujno razumeti, kdaj in zakaj bi jo morali implementirati.

• Nalagalci datotek: omogočanje uporabnikom, da povlečejo datoteke neposredno z namizja ali upravitelja datotek v določeno območje za spuščanje, poenostavi postopek nalaganja.
• Razvrstljivi seznami: Če vaša aplikacija vključuje sezname elementov, kot so seznami opravil, seznami predvajanja ali galerije slik, bodo uporabniki morda cenili možnost preurejanja elementov s povleci in spusti.
• Interaktivne nadzorne plošče: Za orodja za vizualizacijo podatkov in poročanje, je lahko povleci in spusti zmogljiv način za uporabnike, da prilagodijo svoje nadzorne plošče s preurejanjem pripomočkov in grafikonov.

Ohranjanje dostopnosti v mislih

Čeprav je lahko povleci in spusti vizualno privlačen in izboljša uporabniško izkušnjo, je ključnega pomena zagotoviti, da vaša izvedba ostane dostopna vsem uporabnikom, vključno s tistimi s posebnimi potrebami. Zagotovite alternativne metode za interakcijo, kot so tipke s tipkovnico, da bo vaša aplikacija vključujoča.