Vedä ja pudota -toiminnon toteuttaminen on helpompaa kuin uskotkaan. Opi tästä tästä hyödyllisestä oppaasta.

Vedä ja pudota on olennainen ominaisuus, joka parantaa käyttäjän vuorovaikutusta ja helpottaa saumatonta käyttökokemusta. Haluatpa sitten luoda tiedostojen latausohjelman, lajiteltavan luettelon tai interaktiivisen pelin, Tämän API: n ominaisuuksien hyödyntämisen ymmärtäminen on tärkeä taito verkossasi kehitystyökalupakki.

Vedä ja pudota -toiminnon perusteet HTML: ssä

Tyypillisessä vedä ja pudota -järjestelmässä elementtejä on kahden tyyppisiä: ensimmäinen tyyppi sisältää vedettäviä elementtejä, joita käyttäjät voi liikkua hiirellä, ja toinen tyyppi sisältää pudotettavat elementit, jotka yleensä määrittävät, mihin käyttäjät voivat sijoittaa elementti.

Vetämisen ja pudotuksen toteuttamiseksi sinun on kerrottava selaimelle, mitä elementtejä haluat vetää. Jotta käyttäjä voi vetää elementin, siinä tulee olla a vedettäväHTML-attribuutti asetettu totta, kuten tämä:

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

Kun käyttäjä alkaa käynnistää vetotapahtuman, selain toimittaa oletusarvoisen "haamukuvan", joka yleensä antaa palautetta vedetystä elementistä.

Voit muokata tätä kuvaa toimittamalla sen sijaan oman kuvasi. Voit tehdä tämän valitsemalla vedettävän elementin DOM: sta, luomalla uuden kuvan edustamaan mukautettua palautekuvaa ja lisäämällä vedä aloitus vedä tapahtumakuuntelija näin:

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

Yllä olevassa koodilohkossa setDragImage menetelmällä on kolme parametria. Ensimmäinen parametri viittaa kuvaan. Muut parametrit edustavat kuvan vaaka- ja pystysuuntaisia ​​siirtymiä. Kun suoritat koodin selaimessa ja alat vetää elementtiä, huomaat, että mukautettu vedäkuva on korvattu aiemmin määritetyllä mukautetulla kuvalla.

Jos haluat sallia pudotuksen, sinun on estettävä oletustoiminto peruuttamalla molemmat dragenter ja dragover tapahtumia, kuten tämä:

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

DragEvent-käyttöliittymän ymmärtäminen

JavaScript-ominaisuudet a DragEvent käyttöliittymä, joka edustaa käyttäjän vuorovaikutusta vetämällä ja pudottamalla. Alla on luettelo mahdollisista tapahtumatyypeistä DragEvent käyttöliittymä.

  • raahata: Käyttäjä käynnistää tämän tapahtuman vetäessään elementtiä.
  • dragend: Tämä tapahtuma käynnistyy, kun vetotoiminto päättyy tai kun käyttäjä keskeyttää sen. Tyypillinen vetäminen voi päättyä vapauttamalla hiiren painike tai painamalla Esc-näppäintä.
  • dragenter: Vedetty elementti laukaisee tämän tapahtuman, kun se syöttää kelvollisen pudotuskohteen.
  • dragleave: Kun vedetty elementti poistuu pudotuskohteesta, tämä tapahtuma käynnistyy.
  • dragover: Kun käyttäjä vetää vedettävän elementin pudotuskohteen päälle, tapahtuma käynnistyy.
  • vedä aloitus: Tapahtuma käynnistyy vetämisen alkaessa.
  • pudota: Käyttäjä käynnistää tämän tapahtuman, kun hän pudottaa elementin pudotuskohteeseen.

Kun vedät tiedostoa selaimeen selaimen ulkopuolisesta ympäristöstä (esimerkiksi käyttöjärjestelmän tiedostonhallinnasta), selain ei käynnistä vedä aloitus tai dragend Tapahtumat.

DragEvent voi olla hyödyllinen, jos haluat lähettää mukautetun vedätapahtuman ohjelmallisesti. Jos esimerkiksi haluat a div Voit käynnistää mukautettuja vetotapahtumia sivun latauksen yhteydessä. Näin teet sen. Luo ensin uusi mukautettu DragEvent() kuten tämä:

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

Yllä olevassa koodilohkossa customDragStartEvent edustaa esimerkkiä DragEvent(). Sisään customDragStartEvent, konstruktoriargumentteja on kaksi. Ensimmäinen edustaa vedä tapahtumatyyppiä, joka voi olla yksi seitsemästä aiemmin mainitusta tapahtumatyypistä.

Toinen argumentti on objekti, jossa on a tiedonsiirto avain, joka edustaa esiintymää Tiedonsiirto, josta saat lisätietoja myöhemmin tässä oppaassa. Tartu seuraavaksi elementtiin, josta haluat käynnistää tapahtuman Document Object Model (DOM).

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

Lisää sitten tapahtumakuuntelijat näin:

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

Yllä olevassa ensimmäisessä tapahtumaseurannassa takaisinsoittotoiminto kirjaa tekstin "Vedä aloitettu!" ja kutsuu setData menetelmällä tiedonsiirto omaisuutta tapahtuma esine. Nyt voit käynnistää mukautettuja tapahtumia seuraavasti:

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

Tietojen siirto dataTransferilla

The tiedonsiirto objekti toimii siltana lähdeelementin (vedettävä kohde) ja kohdeelementin (pudotettava alue) välillä vedä ja pudota -toiminnon aikana. Se toimii tilapäisenä tallennussäiliönä tiedoille, jotka haluat jakaa näiden elementtien välillä.

Nämä tiedot voivat olla eri muotoisia, kuten tekstiä, URL-osoitteita tai mukautettuja tietotyyppejä, mikä tekee siitä monipuolisen työkalun monenlaisten vedä ja pudota -toimintojen toteuttamiseen.

SetData():n käyttäminen tietojen paketointiin

Jos haluat siirtää tietoja vedettävästä elementistä pudotettavaan, käytä setData() tarjoama menetelmä tiedonsiirto esine. Tämän menetelmän avulla voit pakata siirrettävät tiedot ja määrittää tietotyypin. Tässä on perusesimerkki:

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

Kun käyttäjä alkaa vetää määritettyä elementtiä, setData() pakkauksissa teksti "Hei, maailma!" tietotyypin kanssa tekstiä / tavallista. Nämä tiedot on nyt liitetty vetotapahtumaan, ja pudotettava kohde voi käyttää niitä pudotustoiminnon aikana.

Tietojen noutaminen getData() -sovelluksella

Vastaanottopäässä, pudotettavan elementin tapahtumakuuntelijassa, voit hakea siirretyt tiedot käyttämällä getData() menetelmä:

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

Yllä oleva koodilohko hakee tiedot samalla tietotyypillä (tekstiä / tavallista), joka määritettiin käyttämällä setData() menetelmää aikaisemmin. Tämän avulla voit käyttää ja käsitellä siirrettyjä tietoja tarpeen mukaan pudotettavan elementin kontekstissa.

Käytä koteloita vedä ja pudota -liitäntöihin

Vedä ja pudota -toimintojen integrointi verkkosovelluksiin voi olla tehokas parannus, mutta on tärkeää ymmärtää, milloin ja miksi se kannattaa ottaa käyttöön.

  • Tiedostojen lataajat: Kun käyttäjät voivat vetää tiedostoja suoraan työpöydältään tai tiedostonhallinnasta määrätylle pudotusalueelle, latausprosessi yksinkertaistuu.
  • Lajiteltavat luettelot: Jos sovelluksesi sisältää luetteloita kohteista, kuten tehtäväluetteloita, soittolistoja tai kuvagallerioita, käyttäjät saattavat arvostaa mahdollisuutta järjestää kohteita uudelleen vetämällä ja pudottamalla.
  • Interaktiiviset hallintapaneelit: varten tietojen visualisointi- ja raportointityökalut, vedä ja pudota voi olla tehokas tapa, jolla käyttäjät voivat mukauttaa kojetaulujaan järjestämällä widgetejä ja kaavioita uudelleen.

Esteettömyys mielessä

Vaikka vetäminen ja pudottaminen voi olla visuaalisesti houkutteleva ja parantaa käyttökokemusta, on erittäin tärkeää varmistaa, että toteutus pysyy kaikkien käyttäjien, myös vammaisten, käytettävissä. Tarjoa vaihtoehtoisia vuorovaikutustapoja, kuten näppäimistösäätimiä, jotta sovelluksesi on kattava.