HTML5 include atribute noi ce pot fi folosite pentru Drag si Drop cu mouse-ul. Drag reprezinta tragerea obiectului cu mouse-ul, iar Drop e plasarea acestuia (cand se elibereaza clicul de la mouse).
Acestea sunt atributele HTML5 ce pot fi utilizate in efecte drag-drop:
• draggable - Acest atribut specifica daca un element HTML poate fi tras cu mouse-ul (Drag) (valori: true, false, sau auto).
• ondrag - Acest eveniment e declansat continuu in timpul unei operatiuni de tragere cu mouse-ul.
• ondragstart - Evenimentul e declansat cand utilizatorul incepe sa mute obiectul.
• ondragenter - Evenimentul e declansat pe elementul definit pt. Drop (unde va fi lasat obiectul tras) cand acesta intra in suprafata lui.
• ondragover - Acest eveniment e declansat continuu in timp ce obiectul e tras pe elementul definit pentru Drop.
• ondragleave - Evenimentul e declansat cand obiectul e tras in afara zonei elementului unde trebuie plasat; cand paraseste suprafata acestuia.
• ondragend - E declansat cand utilizatorul termina operatiunea de tragere cu mouse-ul si elibereaza clicul.
• ondrop - Evenimentul e declansat pe elementul setat pentru plasarea obiectului tras, cand acesta e plasat; vine imediat dupa ondragend.
nume_atribut="handler(event)"- handler(event) - e o functie care sa fie apelata la declansarea evenimentului reprezentat de acel atribut.
• Mai intai, pentru a face un element HTML sa poata fi tras cu mouse-ul, se adauga atributul draggable cu valoare "true", si atributul ondragstart.
- Sintaxa pt. obiect ce poate fi tras:
Elementele cu continut care poate fi editat (textarea, input:text, input:password, input:search) sunt deja un suport in care pot fi plasate obiectele trase cu mouse-ul. Daca vreti sa creati alte tipuri de elemente HTML ca loc de plasare, adaugati atributul ondrop si anulati evenimentul ondragover (folosind valoarea: "return false", sau o functie cu: event.preventDefault()). Ca sa fie mai sigur, anulati si evenimentul ondragenter.
- Sintaxa pt. element definit ca loc de plasare:
Exemple Drag si Drop
1. Un DIV cu continut ce poate fi tras cu mouse-ul si mutat in alt DIV.
<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Exemplu Drag si Drop HTML5 - JavaScript</title>
<style type="text/css">
#drag1 {
width: 12em;
margin: .2em;
background-color: #02ed03;
border: 2px dashed #000;
padding: .2em;
color: #0001da;
cursor: pointer;
}
#target_drop1 {
width: 20em;
min-height: 3em;
margin: .2em;
background-color: #ededfe;
border: 2px solid #000;
}
</style>
</head>
<body>
<div draggable="true" ondragstart="dragStart(event)" id="drag1">Clic si trageti.<br/>https://marplo.net/</div>
<div id="target_drop1" ondrop="drop(event)" ondragenter="return false;" ondragover="allowDrop(event)">Plasati aici</div>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault(); // anuleaza evenimentul
}
// functie apelata de ondragstart
function dragStart(ev) {
// seteaza tipul si valoarea continutului tras cu mouse-ul
// Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
ev.dataTransfer.setData('Text', ev.target.id);
}
// functie apelata de ondrop
function drop(ev) {
ev.preventDefault(); // anuleaza evenimentul implicit pentru a permite executarea ondrop
// preia valoarea setata de setData() (ID-ul obiectului mutat),
// ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
var drag_data = ev.dataTransfer.getData('Text');
// adauga obiectul in elementul definit pt. Drop
ev.target.appendChild(document.getElementById(drag_data));
}
</script>
</body>
</html>
• In elementul care trebuie mutat /tras, e adaugat: draggable="true" si ondragstart="dragStart(event)" ca sa specifice ce se intampla in momentul cand utilizatorul incepe sa traga obiectul, apeleaza functia dragStart(), unde se specifica ce continut e tras.In aceasta functie, codul: ev.dataTransfer.setData('Text', ev.target.id); seteaza tipul de data (in acest caz "Text") si valoarea asociata ei (ID-ul continutului tras).
• In celalalt DIV, atributul ondragover specifica unde poate fi plasat continutul tras. Se apeleaza functia allowDrop() ce contine instructiunea: event.preventDefault() sa anuleze evenimentul "drag" ca sa permita declansarea "ondrop".
Se foloseste si ondragenter="return false;" ca sa anuleze evenimentul declansat la intrarea obiectului in zona de plasare.
- Cu: ondrop="drop(event)" se seteaza ce sa se intample cand mouse-ul e eliberat pentru plasarea continutului tras, apeleaza functia drop(), ce contine acest cod:
function drop(ev) {
ev.preventDefault();
var drag_data = ev.dataTransfer.getData('Text');
ev.target.appendChild(document.getElementById(drag_data));
}
- preventDefault() intrerupe browser-ul sa declanseze actiunea implicita la acest eveniment (implicit la Drop e deschiderea ca link in fereastra).- Cu metoda: ev.dataTransfer.getData('Text') se obtine data /valoare ce reprezinta obiectul tras, setata cu setData() si asociata tipului "Text" (in acest caz, ID-ul continutului mutat).
- Apoi, ev.target.appendChild(document.getElementById(drag_data)); adauga obiectul tras in elementul pentru Drop.
• Rezulta:
https://marplo.net/
.2 Trage si muta o imagine de la un <div> in altul, si inapoi; prin adaugarea atributelor "ondragover" si "ondrop" in ambele DIV'-uri.
<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Exemplu Drag si Drop imagine - HTML5 - JavaScript</title>
<style type="text/css">
#div1, #div2 {
float: left;
width: 19em;
min-height: 90px;
margin: .2em;
border: 2px solid #000;
padding: .2em;
}
.todrag {
cursor: pointer;
}
.dragging {
border: 1px dashed #00f;
background: #ff1;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="marplo.gif" draggable="true" ondragstart="dragStart(event)" id="drag2" class="todrag" width="274" height="89" alt="Drag-Drop imagine" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br style="clear:both" />
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault(); // anuleaza evenimentul
}
// functie apelata de ondragstart
function dragStart(ev) {
// seteaza tipul si valoarea continutului tras cu mouse-ul
// Aceasta valoare va fi returnata de getData(). Aici ID-ul obiectului mutat
ev.dataTransfer.setData('Text', ev.target.id);
// seteaza alta clasa css
ev.target.className = 'dragging';
}
// functie apelata de ondrop
function drop(ev) {
ev.preventDefault(); // anuleaza evenimentul implicit pentru a permite executarea ondrop
// preia valoarea setata de setData() (ID-ul obiectului mutat),
// ca parametru se foloseste sirul cu acelasi tip de data setata cu setData()
var drag_data = ev.dataTransfer.getData('Text');
// adauga obiectul in elementul definit pt. Drop
ev.target.appendChild(document.getElementById(drag_data));
// seteaza alta clasa css
document.getElementById(drag_data).className = 'todrag';
}
</script>
</body>
</html>
- Demo :
Atributele cu evenimentele HTML5 pentru Drag-Drop sunt folositoare la efecte simple de mutare a unui continut dintr-un element in altul, dar nu sunt utile pentru operatiuni cu interfata mai complexa de drag-drop. In acest caz folositi jQuery sau alta librarie de functii JavaScript.
De exemplu, daca vreti sa restrangeti efectul de Drag doar in interiorul elementului parinte, folositi jQuery UI; vedeti Exemplu 4 din acest tutorial: jQuery UI draggable - Muta /Trage elemente.