Kuidas kasutada HTML-i pukseerimise API-t

Pukseerimine on oluline funktsioon, mis täiustab kasutaja interaktsiooni ja hõlbustab sujuvat kasutuskogemust. Ükskõik, kas soovite luua failide üleslaadijat, sorteeritavat loendit või interaktiivset mängu, selle API võimaluste kasutamise mõistmine on teie veebis ülioluline oskus arendustööriistade komplekt.

HTML-i pukseerimise põhitõed

Tüüpilises pukseerimissüsteemis on kahte tüüpi elemente: esimene tüüp sisaldab lohistatavaid elemente, mida kasutajad saab liikuda hiirega ja teine ​​tüüp sisaldab kukutatavaid elemente, mis tavaliselt määravad, kuhu kasutajad saavad paigutada element.

Pukseerimise rakendamiseks peate brauserile ütlema, milliseid elemente soovite lohistada. Et muuta element kasutaja poolt lohistatavaks, peaks sellel elemendil olema a lohistatavHTML atribuut seatud tõsi, nagu nii:

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

Kui kasutaja hakkab käivitama lohistamissündmust, edastab brauser vaikekujutise "kummitus", mis tavaliselt annab lohistatava elemendi kohta tagasisidet.

Saate seda pilti kohandada, esitades selle asemel oma pildi. Selleks valige DOM-ist lohistatav element, looge kohandatud tagasiside kujutise esitamiseks uus pilt ja lisage dragstart lohistage sündmuste kuulaja nii:

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

Ülaltoodud koodiplokis on setDragImage meetodil on kolm parameetrit. Esimene parameeter viitab pildile. Teised parameetrid tähistavad vastavalt pildi horisontaalseid ja vertikaalseid nihkeid. Kui käivitate koodi brauseris ja alustate elemendi lohistamist, märkate, et kohandatud lohistamispilt on asendatud varem määratud kohandatud pildiga.

Kui soovite lubada kukkumist, peate takistama vaikekäitumist, tühistades mõlemad lohistaja ja dragover sellised sündmused:

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

DragEvent liidese mõistmine

JavaScripti funktsioonid a DragEvent liides, mis esindab kasutaja pukseerimise interaktsiooni. Allpool on loend võimalikest sündmuste tüüpidest DragEvent liides.

• vedama: kasutaja käivitab selle sündmuse elemendi lohistamise ajal.
• dragend: see sündmus käivitub, kui lohistamistoiming lõppeb või kui kasutaja selle katkestab. Tüüpiline lohistamine võib lõppeda hiirenupu vabastamisega või paoklahvi vajutamisega.
• lohistaja: lohistatud element käivitab selle sündmuse, kui see sisestab kehtiva langemise sihtmärgi.
• lohistada: kui lohistatud element lahkub langetamise sihtmärgist, käivitub see sündmus.
• dragover: kui kasutaja lohistab pukseeritava elemendi üle langetava sihtmärgi, käivitub sündmus.
• dragstart: sündmus käivitub lohistamise alguses.
• tilk: kasutaja käivitab selle sündmuse, kui ta kukutab elemendi kukutatavale sihtmärgile.

Kui lohistate faili brauserisse välisest keskkonnast (näiteks operatsioonisüsteemi failihaldurist), ei käivita brauser dragstart või dragend sündmused.

DragEvent võib olla kasulik, kui soovite saata kohandatud lohistamissündmuse programmiliselt. Näiteks kui soovite a div kohandatud lohistamissündmuste käivitamiseks lehe laadimisel toimige järgmiselt. Esiteks looge uus kohandamine DragEvent() nagu nii:

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

Ülaltoodud koodiplokis customDragStartEvent esindab näidet DragEvent(). sisse customDragStartEvent, on kaks konstruktori argumenti. Esimene tähistab lohistamissündmuse tüüpi, mis võib olla üks seitsmest varem mainitud sündmusetüübist.

Teine argument on objekt, millel on a andmete ülekanne võti, mis esindab eksemplari Andmete ülekanne, mille kohta saate sellest juhendist hiljem rohkem teada. Järgmiseks haarake elemendist, millest soovite sündmuse käivitada Dokumendiobjekti mudel (DOM).

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

Seejärel lisage sündmuste kuulajatele selline:

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

Esimeses ülaltoodud sündmuste kuulajas logib tagasihelistamise funktsiooni funktsioon teksti "Lohistamine algas!" ja kutsub esile setData meetodil andmete ülekanne kinnistul sündmus objektiks. Nüüd saate käivitada sellised kohandatud sündmused:

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

Andmete edastamine DataTransferiga

The andmete ülekanne objekt toimib sillana lähteelemendi (lohistav element) ja sihtelemendi (kukutav ala) vahel pukseerimistoimingu ajal. See toimib ajutise salvestusmahutina andmete jaoks, mida soovite nende elementide vahel jagada.

Need andmed võivad esineda erineval kujul, nagu tekst, URL-id või kohandatud andmetüübid, muutes need mitmekülgseks tööriistaks paljude pukseerimisfunktsioonide rakendamiseks.

SetData() kasutamine andmete pakkimiseks

Andmete teisaldamiseks pukseeritavalt elemendilt kukutatavale elemendile kasutage setData() pakutud meetod andmete ülekanne objektiks. See meetod võimaldab teil pakkida andmed, mida soovite edastada, ja määrata andmetüübi. Siin on põhinäide:

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

Kui kasutaja hakkab määratud elementi lohistama, setData() pakib teksti "Tere, maailm!" andmetüübiga tekst/lihtne. Need andmed on nüüd seotud lohistamise sündmusega ja kukutatav sihtmärk pääseb neile juurde kukutamistoimingu ajal.

Andmete toomine getData() abil

Vastuvõtvas otsas, kukutatava elemendi sündmustekuulajas, saate edastatud andmed hankida, kasutades getData() meetod:

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

Ülaltoodud koodiplokk hangib andmed sama andmetüübiga (tekst/lihtne), mis määrati kasutades setData() meetod varem. See võimaldab teil kukutatava elemendi kontekstis ülekantud andmetele juurde pääseda ja neid vastavalt vajadusele töödelda.

Kasutage pukseerimisliideste jaoks ümbriseid

Pukseerimisfunktsiooni integreerimine veebirakendustesse võib olla võimas täiustus, kuid oluline on mõista, millal ja miks peaksite seda rakendama.

• Failide üleslaadijad: lubades kasutajatel lohistada faile otse oma töölaualt või failihaldurist määratud rippalale, lihtsustab üleslaadimise protsessi.
• Sortitavad loendid: kui teie rakendus hõlmab üksuste loendeid, näiteks ülesannete loendeid, esitusloendeid või pildigaleriisid, võivad kasutajad hinnata võimalust üksusi ümber järjestada pukseerimise teel.
• Interaktiivsed armatuurlauad: Sest andmete visualiseerimise ja aruandluse tööriistad, võib pukseerimine olla võimas viis, kuidas kasutajad saavad vidinaid ja diagramme ümber korraldada oma armatuurlaudu kohandada.

Juurdepääsetavust silmas pidades

Kuigi pukseerimine võib olla visuaalselt atraktiivne ja parandada kasutajakogemust, on ülioluline tagada, et teie rakendus oleks kõigile, sealhulgas puuetega kasutajatele, juurdepääsetav. Rakenduse kaasavaks muutmiseks pakkuge interaktsiooniks alternatiivseid meetodeid, näiteks klaviatuuri juhtnuppe.