Curs Javascript

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 adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canciĆ³n.
- Ea nu canta acel cantec.
Drag si Drop cu atribute HTML5

Last accessed pages

  1. Tag-urile iframe si object (1838)
  2. Blog si Cugetari Personale (51324)
  3. Aliniere DIV-uri pe aceeasi linie (2537)
  4. Curs si Tutoriale JavaScript (69406)
  5. Curs HTML gratuit Tutoriale HTML5 (102449)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4326)
  2. Curs HTML gratuit Tutoriale HTML5 (3571)
  3. Curs si Tutoriale JavaScript (3088)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3050)
  5. Curs CSS Online Tutoriale CSS3 (2989)