draggable-attribuutti ja dragstart-tapahtuma
Tee elementeistä vedettäviä ja reagoi dragstart-tapahtumaan
draggable-attribuutti ja dragstart-tapahtuma on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
draggable-attribuutti
Mistä tahansa elementistä tulee raahauslähde, kun määritätte sille draggable="true". Linkit ja kuvat ovat oletusarvoisesti raahattavia; kaikki muut elementit (divit, lit, spanit) edellyttävät nimenomaista attribuuttia. draggable="false" poistaa elementin natiivin raahauksen piiristä.
<div draggable="true" id="card">Drag me</div>dragstart-tapahtuma
Kun käyttäjä aloittaa raahauksen, lähde-elementti laukaisee dragstart-tapahtuman. Tässä vaiheessa raahaus alustetaan: tallentakaa siirtyvä kohde, tyylitelkää sitä tarvittaessa ja kirjoittakaa dataa dataTransfer-objektiin, jonka pudotuskohde lukee.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});Ilman dragstart-tapahtumaa mitään ei tapahdu
Jos merkitsette elementin raahattavaksi mutta ette koskaan käsittele dragstart-tapahtumaa, selain näyttää edelleen raahattavan haamukuvan, mutta dataa ei aseteta, joten useimmat pudotuskohteet hylkäävät pudotuksen. Yhdistäkää draggable-attribuuttiin aina dragstart-kuuntelija, joka tallentaa vähintään tunnisteen.
effectAllowed-arvon asettaminen
e.dataTransfer.effectAllowed = "move" dragstart-tapahtumassa rajoittaa toiminnon seuraaviin vaihtoehtoihin: "copy", "move", "link", "copyMove", "all" tai "none". Tämä määrittää selaimen näyttämän kohdistimen ja pudotuskohteen myöhemmin asettaman dropEffect-arvon.
Visuaalisen vihjeen lisääminen
Lisätkää lähde-elementtiin CSS-luokka, jotta se näkyy himmennettynä raahauksen aikana: card.classList.add("dragging"). Poistakaa luokka dragend-tapahtumassa, jotta tyylittely poistuu riippumatta siitä, onnistuiko pudotus vai peruttiinko se Esc-näppäimellä.
Mukautettu raahauskuva
Oletusarvoisesti selain raahaa lähde-elementistä otettua läpikuultavaa kuvaa. Ohittakaa tämä toiminnolla e.dataTransfer.setDragImage(node, offsetX, offsetY) — välittäkää piilotettu DOM-elementti tai Image, joka näytetään mukautettuna esikatseluna kohdistimen kohdalla.
const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setDragImage(ghost, 20, 20);
});dragend-tapahtuma
dragend laukaistaan lähde-elementissä raahauksen päätyttyä riippumatta siitä, pudotettiinko kohde onnistuneesti, kelpaamattomaan kohteeseen vai peruttiinko raahaus. Käyttäkää sitä siivoukseen — poistakaa dragging-luokka, piilottakaa haamuesikatselut ja palauttakaa peittävyys.
Peruuttamisen tunnistaminen
Tarkistakaa dragend-tapahtuman sisällä e.dataTransfer.dropEffect. Jos arvo on "none", pudotusta ei tapahtunut (kohde hylkäsi sen, käyttäjä painoi Esc-näppäintä tai kohde pudotettiin sivun ulkopuolelle). Muussa tapauksessa arvo vastaa pudotuskohteen valitsemaa toimintoa ("move", "copy", "link").
Raahaus kosketuslaitteilla
Natiivi drag and drop on suunniteltu ensisijaisesti työpöytälaitteille. Kosketuslaitteilla rajapinta toimii tuskin lainkaan ilman polyfilliä tai Pointer Events -pohjaista korvaavaa toteutusta. Suosikaa mobiiliystävällisissä uudelleenjärjestämiskäyttöliittymissä SortableJS:n tai dnd-kit:n kaltaisia kirjastoja, jotka abstrahoivat molemmat tapahtumamallit.
Esteettömyysnäkökohdat
Natiivi drag and drop ei ole käytettävissä näppäimistöllä — pelkästään näppäimistöä käyttävät eivät voi järjestää kohteita uudelleen. Tarjotkaa aina vaihtoehto: nuolinäppäinten käsittelijät, Siirrä ylös- ja Siirrä alas -painikkeet tai aria-ohjattu uudelleenjärjestämisvalintaikkuna. Raahauksen ja pudotuksen tulee täydentää, ei korvata muita toimintoja.
Selaimen oletustoimintojen poistaminen käytöstä
Tekstin valitseminen raahattavien elementtien sisällä voi häiritä raahausta. Käyttäkää lähde-elementissä CSS-ominaisuuksia user-select: none ja -webkit-user-drag: element, jotta selain raahaa elementtiä sen sisällä olevan tekstin valitsemisen sijaan.
Tietotesti
Miksi dragstart-kuuntelija on yleensä liitettävä elementtiin, vaikka draggable="true"-attribuutti yksinään tekee elementistä raahattavan?
Yhteenveto
Merkitkää lähteet attribuutilla draggable="true" ja käyttäkää dragstart-tapahtumaa dataTransferin täyttämiseen, effectAllowed-arvon asettamiseen ja tarvittaessa mukautetun raahauskuvan määrittämiseen. Yhdistäkää tähän dragend-tapahtuma tyylien siivoamiseksi. Tarjotkaa esteettömyyden vuoksi näppäimistövaihtoehdot ja harkitkaa polyfillejä kosketuslaitteita varten.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”draggable-attribuutti ja dragstart-tapahtuma” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “draggable-attribuutti ja dragstart-tapahtuma”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”draggable-attribuutti ja dragstart-tapahtuma”?
Tee elementeistä vedettäviä ja reagoi dragstart-tapahtumaan Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”draggable-attribuutti ja dragstart-tapahtuma”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- draggable-attribuutti ja dragstart-tapahtuma
- dragover- ja drop-tapahtumat
- dataTransfer-objekti
- Käytännön raahaamalla järjestettävä luettelo