HTML5 Drag and Drop. Element care poate fi deplasat cu atributul dragable pe true. Atributul ondragstart. Metoda dataTransfer.setData(). Evenimentul ondragover. Metoda event.preventDefault() pentru evenimentul ondragover. Atributul ondrop.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
În primul rând: pentru a face un element care poate fi trasat, setați atributul dragable pe true:
<img draggable="true">
Ce să deplasați - ondragstart și setData ()
Apoi, specificați ce ar trebui să se întâmple atunci când elementul este tras.
În exemplul de mai sus, atributul ondragstart apelează o funcție, drag (eveniment), care specifică ce date trebuie să fie trasate.
Metoda dataTransfer.setData () stabilește tipul de date și valoarea datelor trase:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
În acest caz, tipul de date este „text”, iar valoarea este id-ul elementului care poate fi antrenat („drag1”).Unde să elimin datele trase - ondragover
Evenimentul ondragover specifică unde pot fi eliminate datele trase.
În mod implicit, datele / elementele nu pot fi abandonate în alte elemente. Pentru a permite o eliminare, trebuie să prevenim manipularea implicită a elementului.
Acest lucru se realizează prin apelarea metodei event.preventDefault () pentru evenimentul ondragover:
event.preventDefault()
Faceți eliminarea - ondrop
Atunci când datele glisate sunt abandonate, apare un eveniment drop.
În exemplul de mai sus, atributul ondrop apelează o funcție, drop(eveniment):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Cod explicat:
- Call preventDefault() - pentru a preveni gestionarea implicită a datelor browserului (implicit este deschis ca link in drop)
- Obțineți datele trase cu metoda dataTransfer.getData (). Această metodă va returna orice date care au fost setate la același tip în metoda setData ()
- Datele trase sunt id-ul elementului tras ("drag1")
- Adăugați elementul tras în elementul
drop