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 afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Drag si Drop cu atribute HTML5

Last accessed pages

  1. Substantivul din limba engleza - The Noun (22919)
  2. Gramatica limbii engleze - Prezentare Generala (92214)
  3. I sau Me (3223)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (31324)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (17656)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2259)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (871)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)