Drag si Drop cu atribute HTML5

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:

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.

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.

<<-this si target in .. -- insertAdjacentHTML - Adaugare continut ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.