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.

- Aceasta e sintaxa generala de utilizare a acestor atribute in tag-urile HTML pt. Drag-Drop:
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:
<tag draggable="true" ondragstart="handler(event)" id="draggable_elm">Continut</tag>

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:
<tag id="target_drop" ondrop="someFunction(event)" ondragenter="return false;" ondragover="allowDrop(event)">Lasa Aici</tag>

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:
Clic si trageti.
https://marplo.net/
Plasati aici

.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 :
Clic, trageti si puneti imaginea dintr-un dreptunghi in celalalt si inapoi.
Drag-Drop imagine

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.


Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Drag si Drop cu atribute HTML5

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (50905)
  2. Gradele de comparatie: comparative, superlative (16088)
  3. Adjectivul in limba engleza - The adjective (10139)
  4. Gramatica limbii engleze - Prezentare Generala (101146)
  5. Viitor perfect si Viitorul perfect continuu - Future perfect and Continuous (9363)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3158)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2345)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1783)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)