[Tutorial JS]Drag si Drop cu atribute HTML5

[Tutorial JS]Drag si Drop cu atribute HTML5

#1 de Justin Bieber

Nume Tutorial:Drag si Drop cu atribute HTML5
Descriere: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).
Download:
Autor:
Sursa (Link-ul oficial):

Afiseaza Textul

Propria parere:Nu l-am incercat.
Tutorialul:
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:

Cod: Selectaţi tot

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:

Cod: Selectaţi tot

<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:

Cod: Selectaţi tot

<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.

Cod: Selectaţi tot

<!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/>http://www.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:

Cod: Selectaţi tot

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.
.2 Trage si muta o imagine de la un <div> in altul, si inapoi; prin adaugarea atributelor "ondragover" si "ondrop" in ambele DIV'-uri.

Cod: Selectaţi tot

<!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>

[/b]

[Tutorial JS]Drag si Drop cu atribute HTML5

[Tutorial JS]Drag si Drop cu atribute HTML5

Cine este conectat