JavaScript Academy · Oppitunti

Elementtien tekeminen vedettäviksi

Ottakaa vetäminen käyttöön ja käsitelkää drag-tapahtumia.

Oppitunti 1/413 vaihetta

Elementtien tekeminen vedettäviksi on ilmainen JavaScript 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 JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

HTML Drag and Drop API

Natiivi Drag and Drop API antaa käyttäjien tarttua elementteihin ja pudottaa ne muualle. Se perustuu tapahtumiin: lähde-elementit lähettävät raahaustapahtumia ja pudotuskohteet omia tapahtumiaan. Kirjastoa ei tarvita.

draggable-attribuutti

Oletusarvoisesti vain linkkejä ja kuvia voi raahata. Lisäämällä draggable="true" teette mistä tahansa elementistä raahattavan.

<div draggable="true" id="card">Drag me</div>

draggablen asettaminen JavaScriptissä

Voitte ottaa toiminnon käyttöön tai poistaa sen käytöstä komentosarjasta draggable-ominaisuuden avulla.

const card = document.getElementById("card");
card.draggable = true;

dragstart-tapahtuma

dragstart suoritetaan heti, kun raahaaminen alkaa. Tässä vaiheessa tallennetaan tieto raahattavasta kohteesta.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

Tietojen kuljettaminen dataTransferilla

Tapahtuma tarjoaa ominaisuuden dataTransfer. Liittäkää raahaamiseen mukaan kulkeva sisältö komennolla setData(format, value) tapahtumassa dragstart.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

drag-tapahtuma

drag suoritetaan jatkuvasti elementin liikkuessa. Käyttäkää sitä säästeliäästi — se voi suorittua monta kertaa sekunnissa.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

dragend-tapahtuma

dragend suoritetaan, kun käyttäjä vapauttaa elementin, riippumatta siitä, onnistuiko pudottaminen. Käyttäkää sitä lähde-elementin tyylien palauttamiseen.

card.addEventListener("dragend", (e) => {
  card.classList.remove("dragging");
});

Lähde-elementin merkitseminen

Yleinen toimintamalli on lisätä luokka tapahtumassa dragstart ja poistaa se tapahtumassa dragend, jotta raahattava kohde voidaan himmentää tai korostaa.

card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));

Sallitut toiminnot

Asettakaa effectAllowed tapahtumassa dragstart ilmoittamaan sallitut toiminnot: "copy", "move", "link" tai niiden yhdistelmät.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.effectAllowed = "move";
});

Kosketuslaitteita koskeva rajoitus

Natiivin API:n kosketustuki mobiililaitteissa on rajallinen. Kosketuskäyttöön ensisijaisesti suunnitelluissa sovelluksissa kannattaa harkita Pointer Events -tapahtumia tai erillistä kirjastoa; natiivi API toimii parhaiten työpöytälaitteissa.

Tekstin valinnan poistaminen käytöstä

Raahaaminen voi vahingossa valita tekstiä. Pieni CSS-sääntö pitää raahaamisen siistinä.

/* CSS */
.draggable { user-select: none; }

Pikatarkistus

Testatkaa raahaamisen perusteet.

Vastaa interaktiivisessa oppitunnissa

Kertaus: elementtien tekeminen raahattaviksi

Otitte raahaamisen käyttöön komennolla draggable="true", käsittelitte tapahtumat dragstart, drag ja dragend, liititte sisältöä mukaan komennolla dataTransfer.setData, asetit effectAllowed-ominaisuuden ja tyylittelitte lähde-elementin. Seuraavaksi: pudotuskohteet.

Aloita maksutta

Opi JavaScript 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: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Elementtien tekeminen vedettäviksi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elementtien tekeminen vedettäviksi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Elementtien tekeminen vedettäviksi”?

Ottakaa vetäminen käyttöön ja käsitelkää drag-tapahtumia. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript 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 ”Elementtien tekeminen vedettäviksi”-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ä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript 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

← Takaisin: JavaScript Academy