Setarea și obținerea datelor trasabile cu ajutorul DataTransfe
Când tragem elemente, în manipulatorul evenimentului de tragere este transmis un obiect de tip DragEvent. Acest tip moștenește proprietățile de la MouseEvent și, corespunzător, de la tipul Event, dar, în plus față de acestea, definește și proprietatea dataTransfer. Această proprietate reprezintă datele trasabile sub formă de obiect DataTransfer.
Tipul DataTransfer definește o serie de proprietăți care permit obținerea informațiilor despre datele primite sau configurarea tragerii lor:
- dropEffect: obține sau setează tipul operației de tragere poate avea valorile:
1) copy: se creează o copie a datelor trasabile iar această copie este plasată într-o nouă poziție 2) move: datele sunt complet mutate într-o nouă poziție 3) link: se creează un link către sursa datelor 4) none: datele nu sunt trase
- effectAllowed: setează tipurile posibile de operațiuni poate avea următoarele valori
1) none: elementul nu este trasabil 2) copy: elementul poate fi copiat într-o nouă poziție 3) copyLink: este permisă copierea elementului sau crearea unui link către acesta 4) copyMove: este permisă copierea sau mutarea elementului 5) link: este permisă crearea unui link către elementul trasabil 6) linkMove: este permisă mutarea elementului sau crearea unui link către acesta 7) move: este permisă mutarea elementului într-o nouă poziție 8) all: toate operațiile sunt permise 9) uninitialized: valoarea implicită, dacă această proprietate nu este setată este echivalent cu all
- files: conține lista tuturor fișierelor locale disponibile pentru transferul de date Dacă operația de tragere nu presupune tragerea fișierelor, această proprietate reprezintă o listă goală
- items: oferă un obiect DataTransferItemList, care reprezintă o listă a tuturor datelor de tragere
- types: un array de șiruri care specifică formatele definite în evenimentul de tragere
Pentru gestionarea datelor în timpul tragerii, tipul DataTransfer definește următoarele metode:
- clearData() șterge datele asociate cu obiectul DataTransfer
- getData() format extrage datele obiectului DataTransfer Ca parametru se transmite formatul datelor Returnează datele în formatul specificat Dacă datele în formatul specificat nu sunt setate, returnează un șir gol
- setData() format, data setează pentru obiectul DataTransfer datele data, care corespund formatului format Dacă în DataTransfer există deja date în formatul specificat, atunci noile date înlocuiesc cele existente anterior
- setDragImage (imgElement, xOffset, yOffset) setează imaginea utilizată în timpul tragerii
Primul parametru - imgElement reprezintă elementul <img> utilizat ca sursă de imagine. Parametrii xOffset, yOffset specifică deplasările în interiorul imaginii pe axa x și y, respectiv.
În special, metodele setData()/getData() ne permit să setăm și să obținem ușor datele necesare în timpul tragerii elementelor. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#target {width: 200px;height: 150px; border: #ccc 1px dashed;}
#target.dragover {border-color:#000;}
.item {width:50px;height:50px; display: inline-block; margin:5px;}
</style>
</head>
<body>
<div class="item" style="background-color: red;" draggable="true"></div>
<div class="item" style
="background-color: blue;" draggable="true"></div>
<div id="target"></div>
<script>
const items = document.getElementsByClassName("item");
// setăm manipulatorul pentru evenimentul de tragere a elementului
for (item of items) {
item.addEventListener("dragstart", (e) => {
// ca date trasabile setăm codul HTML al elementului
e.dataTransfer.setData("text/html", e.target.outerHTML);
});
}
const target = document.getElementById("target");
target.addEventListener("dragover", (e) => e.preventDefault());
// la intrarea și ieșirea din zona țintă schimbăm clasa
target.addEventListener("dragenter", (e) => e.target.classList.add("dragover"));
target.addEventListener("dragleave", (e) => e.target.classList.remove("dragover"));
// la eliberarea elementului adăugăm acesta în zona țintă
target.addEventListener("drop", (e) => {
e.srcElement.innerHTML += e.dataTransfer.getData("text/html");
e.target.classList.remove("dragover");
});
</script>
</body>
</html>Elementele trasabile sunt definite cu clasa item - acestea sunt pătratele roșu și albastru. Tragerea se face către elementul <div id="target">.
La început, se înregistrează manipulatorul evenimentului dragstart pentru toate elementele item trasabile. În acest manipulator, prin parametrul său și proprietatea sa dataTransfer, se poate obține obiectul DataTransfer:
const items = document.getElementsByClassName("item");
// setăm manipulatorul pentru evenimentul de tragere a elementului
for (item of items) {
item.addEventListener("dragstart", (e) => {
// ca date trasabile setăm codul HTML al elementului
e.dataTransfer.setData("text/html", e.target.outerHTML);
});
}Obiectul DataTransfer reprezintă datele care sunt trase. Aceste date pot fi definite cu ajutorul metodei setData():
e.dataTransfer.setData("text/html", e.target.outerHTML);Aici, e.target reprezintă elementul care se mută (cel cu atributul draggable setat), iar e.target.outerHTML reprezintă codul HTML al acestui element. Adică, în acest mod, vom muta codul HTML, iar conținutul mutat va avea tipul "text/html".
În zona țintă a tragerii (în elementul target), aceste date pot fi apoi obținute cu ajutorul metodei getData(). În exemplul de mai sus, acest lucru se face în manipulatorul evenimentului drop, când utilizatorul a eliberat elementul trasabil în zona țintă:
target.addEventListener("drop", (e) => {
e.srcElement.innerHTML += e.dataTransfer.getData("text/html");
e.target.classList.remove("dragover");
});În acest caz, preluăm datele trasabile (codul HTML al elementului) și le adăugăm în elementul target.
De asemenea, pentru un efect vizual, când elementul trasabil trece peste granița zonei țintă, comutăm clasa dragover:
target.addEventListener("dragenter", (e) => e.target.classList.add("dragover"));
target.addEventListener("dragleave", (e) => e.target.classList.remove("dragover"));Astfel, putem muta elementele item în elementul target.
