drag și drop
Este posibil să modificați ordinea elementelor unui document HTML, utilizând Trageți evenimentul. Mai jos este un exemplu de bază
Designul paginii
Layout-ul paginii pentru următorul exemplu include:
o zonă Divs târâtă.
Toți Divs din această zonă au atributul draggable = "true". Acesta este un atribut global care indică faptul că elementul poate fi tras folosind funcționalitatea API-ului de drag și drop (drag and drop)
Zonele de eliberare
Zonele slăbite sunt elemente HTML (DIFS în acest caz) în care utilizatorul poate scădea elementele târate.
Evenimente utilizate
Evenimentul drag este declanșat cu o frecvență foarte mare, în timp ce un element HTML este acționat de utilizator
Evenimentul dragstart atunci când începem să tragem.
Obiectul DataTransfer este folosit pentru a salva informații despre obiectul târât. Utilizăm DataTransfer.setData() pentru a seta valoarea acestor date.
document.addEventListener("dragstart", function( event ) { // guarda información acerca del objeto arrastrado event.dataTransfer.setData('text/plain',null) // guarda una referéncia del elemento arrastrado elemenyoArrastrado = event.target; // . . . . más cosas }, false); eveniment dragend este declanșată la capăt atunci când lansăm unitatea.
document.addEventListener("dragend", function( event ) { //. . . . . }, false);Evenimentul
div id = „8d206fbdad”>
Când mouse-ul care trage un element este deasupra unei zone relevante. Este important să împiedicați comportamentul implicit al elementului tras, care este de a reveni la site-ul dvs.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); evenimentul dragenter Când mouse-ul care trage un element intră în zona combinată.
document.addEventListener("dragenter", function( event ) { // comprueba si el event-target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // y en este caso cambia el color de fondo event.target.style.background = "purple"; } }, false); Evenimentul dragleave este declanșat atunci când mouse-ul care trage un element lasă zona de picătură.
Evenimentul drop este declanșată prin eliberarea elementului târât pe o zonă relevantă
dacă elementul tras este o legătură, se deschide într-o pagină nouă. Același lucru se întâmplă dacă elementul tras este o imagine (nu o div cu o imagine). Astfel încât acest lucru nu se întâmplă, trebuie să folosim event.preventDefault();
„9f713A99E3”
Vedeți acest lucru Exemplu în CodePen:
Vedeți furculița de tracțiune stiloului de Gabi (@enxaneta) pe CodePen.