Kā izmantot HTML vilkšanas un nomešanas API

Vilkšana un nomešana ir būtiska funkcija, kas uzlabo lietotāja mijiedarbību un atvieglo lietotāja pieredzi. Neatkarīgi no tā, vai vēlaties izveidot failu augšupielādētāju, šķirojamu sarakstu vai interaktīvu spēli, izpratne par to, kā izmantot šīs API iespējas, ir ļoti svarīga prasme jūsu tīmeklī izstrādes rīku komplekts.

Vilkšanas un nomešanas pamati HTML

Tipiskā vilkšanas un nomešanas sistēmā ir divu veidu elementi: pirmais veids ietver velkamus elementus, ko lietotāji var pārvietot ar peli, un otrais veids ietver nolaižamus elementus, kas parasti norāda, kur lietotāji var ievietot elements.

Lai ieviestu vilkšanu un nomešanu, pārlūkprogrammai ir jāpaziņo, kādus elementus vēlaties vilkt. Lai lietotājs varētu vilkt elementu, šim elementam ir jābūt a velkamsHTML atribūts iestatīts uz taisnība, kā šis:

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

Kad lietotājs sāk vilkšanas notikumu, pārlūkprogramma nodrošina noklusējuma “spoku” attēlu, kas parasti sniedz atsauksmes par vilktu elementu.

Varat pielāgot šo attēlu, tā vietā pievienojot savu attēlu. Lai to izdarītu, atlasiet velkamo elementu no DOM, izveidojiet jaunu attēlu, kas attēlo pielāgoto atgriezeniskās saites attēlu, un pievienojiet dragstart velciet notikumu klausītāju šādi:

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

Iepriekš esošajā koda blokā setDragImage metodei ir trīs parametri. Pirmais parametrs atsaucas uz attēlu. Pārējie parametri attēlo attiecīgi attēla horizontālās un vertikālās nobīdes. Kad palaižat kodu pārlūkprogrammā un sākat vilkt elementu, pamanīsit, ka pielāgotais vilkšanas attēls ir aizstāts ar iepriekš iestatīto pielāgoto attēlu.

Ja vēlaties atļaut kritienu, jums ir jānovērš noklusējuma darbība, atceļot abus ievilkējs un dragover notikumi, piemēram:

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

Izpratne par DragEvent interfeisu

JavaScript līdzekļi a DragEvent saskarne, kas attēlo lietotāja vilkšanas un nomešanas mijiedarbību. Zemāk ir saraksts ar iespējamiem notikumu veidiem DragEvent saskarne.

• velciet: lietotājs aktivizē šo notikumu, velkot elementu.
• dragend: šis notikums tiek aktivizēts, kad vilkšanas darbība beidzas vai lietotājs to pārtrauc. Parasta vilkšanas darbība var beigties, atlaižot peles pogu vai nospiežot atkāpšanās taustiņu.
• ievilkējs: velktais elements aktivizē šo notikumu, kad tas ievada derīgu nomešanas mērķi.
• dragleave: kad vilktais elements atstāj nomešanas mērķi, šis notikums tiek aktivizēts.
• dragover: kad lietotājs velk velkamo elementu virs nolaižamā mērķa, notikums tiek aktivizēts.
• dragstart: notikums tiek aktivizēts vilkšanas darbības sākumā.
• piliens: lietotājs aktivizē šo notikumu, kad viņš nomet elementu uz nomešanas mērķi.

Velkot failu pārlūkprogrammā no vides ārpus pārlūkprogrammas (piemēram, operētājsistēmas failu pārvaldnieka), pārlūkprogramma neaktivizē dragstart vai dragend notikumiem.

DragEvent var noderēt, ja vēlaties programmatiski nosūtīt pielāgotu vilkšanas notikumu. Piemēram, ja vēlaties a div lai aktivizētu pielāgotus vilkšanas notikumus lapas ielādes laikā, rīkojieties šādi. Vispirms izveidojiet jaunu pielāgotu DragEvent() kā šis:

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

Iepriekš esošajā koda blokā customDragStartEvent ir piemērs DragEvent(). In customDragStartEvent, ir divi konstruktora argumenti. Pirmais apzīmē vilkšanas notikuma veidu, kas var būt viens no septiņiem iepriekš minētajiem notikumu veidiem.

Otrais arguments ir objekts ar a datu pārsūtīšana atslēga, kas apzīmē gadījumu Datu pārsūtīšana, par kuru jūs uzzināsiet vairāk vēlāk šajā rokasgrāmatā. Pēc tam satveriet elementu, no kura vēlaties aktivizēt notikumu, no Dokumenta objekta modelis (DOM).

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

Pēc tam pievienojiet notikumu klausītājiem šādi:

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

Pirmajā notikumu uztvērējā iepriekš atzvanīšanas funkcijas funkcija reģistrē tekstu "Velkšana sākta!" un izsauc setData metode uz datu pārsūtīšana īpašums uz notikumu objektu. Tagad varat aktivizēt šādus pielāgotus notikumus:

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

Datu pārsūtīšana ar datu pārsūtīšanu

The datu pārsūtīšana objekts kalpo kā tilts starp avota elementu (velkamo vienumu) un mērķa elementu (nometamo apgabalu) vilkšanas un nomešanas darbības laikā. Tas darbojas kā pagaidu uzglabāšanas konteiners datiem, kurus vēlaties koplietot starp šiem elementiem.

Šiem datiem var būt dažādas formas, piemēram, teksts, vietrāži URL vai pielāgoti datu tipi, padarot tos par daudzpusīgu rīku plaša vilkšanas un nomešanas funkcionalitātes ieviešanai.

SetData() izmantošana datu pakotnei

Lai pārsūtītu datus no velkama elementa uz nolaižamo elementu, izmantojiet setData() nodrošinātā metode datu pārsūtīšana objektu. Šī metode ļauj iepakot datus, ko vēlaties pārsūtīt, un norādīt datu tipu. Šeit ir pamata piemērs:

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

Kad lietotājs sāk vilkt norādīto elementu, setData() iepako tekstu "Sveika, pasaule!" ar datu tipu teksts/vienkāršs. Šie dati tagad ir saistīti ar vilkšanas notikumu, un tiem var piekļūt nolaižamais mērķis nomešanas darbības laikā.

Datu izgūšana ar getData()

Saņēmēja pusē nolaižamā elementa notikumu uztvērējā varat izgūt pārsūtītos datus, izmantojot getData() metode:

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

Iepriekš esošais koda bloks izgūst datus ar tādu pašu datu tipu (teksts/vienkāršs), kas tika iestatīts, izmantojot setData() metode agrāk. Tas ļauj piekļūt pārsūtītajiem datiem un pēc vajadzības manipulēt ar tiem nolaižamā elementa kontekstā.

Vilkšanas un nomešanas interfeisu izmantošanas futrāļi

Vilkšanas un nomešanas funkcionalitātes integrēšana tīmekļa lietojumprogrammās var būt spēcīgs uzlabojums, taču ir svarīgi saprast, kad un kāpēc tā jāievieš.

• Failu augšupielādētāji: ļaujot lietotājiem vilkt failus tieši no darbvirsmas vai failu pārvaldnieka uz noteiktu nomešanas apgabalu, tiek vienkāršots augšupielādes process.
• Kārtojamie saraksti: ja jūsu lietojumprogrammā ir iekļauti vienumu saraksti, piemēram, uzdevumu saraksti, atskaņošanas saraksti vai attēlu galerijas, lietotāji varētu novērtēt iespēju pārkārtot vienumus, izmantojot vilkšanu un nomešanu.
• Interaktīvie informācijas paneļi: Priekš datu vizualizācijas un ziņošanas rīki, vilkšana un nomešana var būt efektīvs veids, kā lietotāji var pielāgot savus informācijas paneļus, pārkārtojot logrīkus un diagrammas.

Paturot prātā pieejamību

Lai gan vilkšana un nomešana var būt vizuāli pievilcīga un uzlabot lietotāja pieredzi, ir ļoti svarīgi nodrošināt, lai jūsu ieviešana joprojām būtu pieejama visiem lietotājiem, tostarp lietotājiem ar invaliditāti. Nodrošiniet alternatīvas mijiedarbības metodes, piemēram, tastatūras vadīklas, lai jūsu lietojumprogramma būtu iekļaujoša.