Įdiegti vilkimo funkciją lengviau, nei manote. Sužinokite, kaip tai padaryti, šiame naudingame vadove.

Nuvilkimas yra pagrindinė funkcija, kuri pagerina vartotojo sąveiką ir palengvina sklandžią vartotojo patirtį. Nesvarbu, ar norite sukurti failų įkėlimo programą, rūšiuojamą sąrašą ar interaktyvų žaidimą, Supratimas, kaip panaudoti šios API galimybes, yra esminis žiniatinklio įgūdis kūrimo priemonių rinkinys.

Vilkite ir numeskite HTML pagrindai

Įprastoje nuvilkimo sistemoje yra dviejų tipų elementai: pirmasis tipas apima nuvelkamus elementus, kuriuos naudotojai gali judėti pele, o antrasis tipas apima nuleidžiamus elementus, kurie paprastai nurodo, kur vartotojai gali įdėti elementas.

Norėdami įdiegti vilkimą, turite nurodyti naršyklei, kokius elementus norite vilkti. Kad elementą galėtų vilkti vartotojas, tame elemente turi būti a tempiamasHTML atributas nustatytas į tiesa, kaip šitas:

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

Kai vartotojas pradeda suaktyvinti vilkimo įvykį, naršyklė pateikia numatytąjį „vaiduoklio“ vaizdą, kuris paprastai pateikia grįžtamąjį ryšį apie velkamą elementą.

instagram viewer

Galite tinkinti šį vaizdą pateikdami savo vaizdą. Norėdami tai padaryti, pasirinkite tempiamą elementą iš DOM, sukurkite naują vaizdą, kuris atspindėtų tinkintą grįžtamojo ryšio vaizdą, ir pridėkite dragstart vilkite įvykių klausytoją taip:

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

Aukščiau esančiame kodo bloke setDragImage metodas turi tris parametrus. Pirmasis parametras nurodo vaizdą. Kiti parametrai rodo atitinkamai horizontalius ir vertikalius vaizdo poslinkius. Kai paleisite kodą naršyklėje ir pradėsite vilkti elementą, pastebėsite, kad pasirinktinis vilkimo vaizdas buvo pakeistas anksčiau nustatytu pasirinktiniu vaizdu.

Jei norite leisti nuleisti, turite užkirsti kelią numatytajam elgesiui atšaukdami abu vilkikas ir dragover įvykiai, tokie:

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

„DragEvent“ sąsajos supratimas

„JavaScript“ funkcijos a DragEvent sąsaja, vaizduojanti naudotojo sąveiką su vilkimu. Toliau pateikiamas galimų įvykių tipų sąrašas DragEvent sąsaja.

  • vilkite: naudotojas suaktyvina šį įvykį vilkdamas elementą.
  • dragendas: Šis įvykis suaktyvinamas, kai vilkimo operacija baigiasi arba kai vartotojas ją pertraukia. Įprasta vilkimo operacija gali baigtis atleidus pelės mygtuką arba paspaudus pabėgimo klavišą.
  • vilkikas: nuvilktas elementas suaktyvina šį įvykį, kai patenka į tinkamą kritimo tikslą.
  • dragleave: kai nuvilktas elementas palieka kritimo tikslą, šis įvykis suaktyvinamas.
  • dragover: kai vartotojas tempia elementą ant nuleidžiamo tikslo, įvykis suaktyvinamas.
  • dragstart: įvykis suaktyvinamas vilkimo operacijos pradžioje.
  • lašas: naudotojas suaktyvina šį įvykį, kai numeta elementą ant numetimo tikslo.

Vilkant failą į naršyklę iš aplinkos, esančios už naršyklės ribų (pavyzdžiui, operacinės sistemos failų tvarkyklės), naršyklė nesuaktyvina dragstart arba dragendas įvykius.

DragEvent gali praversti, jei norite programiškai išsiųsti pasirinktinį vilkimo įvykį. Pavyzdžiui, jei norite a div norėdami suaktyvinti tinkintus vilkimo įvykius įkeliant puslapį, štai kaip tai darote. Pirmiausia sukurkite naują tinkinimą DragEvent() kaip šitas:

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

Aukščiau esančiame kodo bloke customDragStartEvent yra pavyzdys DragEvent(). Į customDragStartEvent, yra du konstruktoriaus argumentai. Pirmasis reiškia vilkimo įvykio tipą, kuris gali būti vienas iš septynių anksčiau paminėtų įvykių tipų.

Antrasis argumentas yra objektas su a duomenų perdavimas raktas, vaizduojantis egzempliorių Duomenų perdavimas, apie kurią daugiau sužinosite vėliau šiame vadove. Tada patraukite elementą, iš kurio norite suaktyvinti įvykį, iš Dokumento objekto modelis (DOM).

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

Tada pridėkite įvykių klausytojus taip:

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

Pirmajame aukščiau esančiame įvykių klausytoje atgalinio skambinimo funkcijos funkcija registruoja tekstą „Vilkti pradėta!“ ir iškviečia setData metodas ant duomenų perdavimas turtas ant įvykis objektas. Dabar galite suaktyvinti tinkintus įvykius, tokius kaip:

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

Duomenų perkėlimas naudojant „dataTransfer“.

The duomenų perdavimas objektas tarnauja kaip tiltas tarp šaltinio elemento (nutempiamas elementas) ir tikslinio elemento (nuleidžiamos srities) vilkimo operacijos metu. Jis veikia kaip laikinas duomenų, kuriuos norite bendrinti tarp šių elementų, saugojimo talpykla.

Šie duomenys gali būti įvairių formų, pvz., teksto, URL arba tinkintų duomenų tipų, todėl tai yra universalus įrankis, skirtas įvairioms nuvilkimo funkcijoms įgyvendinti.

Naudojant setData() duomenų paketui

Norėdami perkelti duomenis iš tempiamojo elemento į nuleidžiamąjį, naudosite setData() pateiktą metodą duomenų perdavimas objektas. Šis metodas leidžia supakuoti duomenis, kuriuos norite perkelti, ir nurodyti duomenų tipą. Štai pagrindinis pavyzdys:

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

Kai vartotojas pradeda vilkti nurodytą elementą, setData() pakuočių tekstas "Labas, pasauli!" su duomenų tipu tekstas/paprastas. Šie duomenys dabar susieti su vilkimo įvykiu ir juos gali pasiekti nuleidžiamasis objektas numetimo operacijos metu.

Duomenų gavimas naudojant getData()

Priėmimo pusėje, nuleidžiamo elemento įvykių klausytoje, perkeltus duomenis galite nuskaityti naudodami getData () metodas:

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

Aukščiau pateiktas kodo blokas nuskaito duomenis su tuo pačiu duomenų tipu (tekstas/paprastas), kuris buvo nustatytas naudojant setData() metodas anksčiau. Tai leidžia pasiekti perduotus duomenis ir prireikus juos manipuliuoti išleidžiamo elemento kontekste.

Naudokite „Drag and Drop“ sąsajų dėklus

Nuvilkimo funkcijos integravimas į žiniatinklio programas gali būti galingas patobulinimas, tačiau būtina suprasti, kada ir kodėl turėtumėte tai įdiegti.

  • Failų įkėlėjai: leidžiant vartotojams nuvilkti failus tiesiai iš savo darbalaukio arba failų tvarkyklės į nurodytą nuleidimo sritį, įkėlimo procesas supaprastinamas.
  • Rūšiuojami sąrašai: jei jūsų programa apima elementų sąrašus, pvz., užduočių sąrašus, grojaraščius arba vaizdų galerijas, vartotojai gali įvertinti galimybę pertvarkyti elementus vilkdami ir numesdami.
  • Interaktyvūs prietaisų skydeliai: Dėl duomenų vizualizavimo ir ataskaitų teikimo įrankiai, vilkimas gali būti veiksmingas būdas vartotojams tinkinti savo prietaisų skydelius pertvarkant valdiklius ir diagramas.

Nepamirškite apie prieinamumą

Nors vilkimas gali būti vizualiai patrauklus ir pagerinti naudotojo patirtį, labai svarbu užtikrinti, kad jūsų diegimas liktų prieinamas visiems naudotojams, įskaitant turinčius negalią. Pateikite alternatyvius sąveikos metodus, pvz., klaviatūros valdiklius, kad jūsų programa būtų įtraukta.