Drag si Drop este un efect prin care elementele pot fi mutate /trase cu mouse-ul si lasate intr-un loc special in pagina web.
Pentru a crea efecte drag & drop cu jQuery, trebuie sa folositi si jQuery UI, o librarie de functii aditionale la libraria de baza jQuery.
jQuery UI e ca un plugin cu mai multe functii pentru crearea de efecte speciale cu jQuery. Deci, trebuie sa includeti in pagina web ambele fisiere ".js": cel principal cu jQuery si jQuery UI.
- Puteti descarca jQuery UI de la pagina: Download jQuery UI


Efectul "drag & drop" se creaza cu metodele: draggable() si droppable().
Metoda draggable() adauga elementelor din pagina posibilitatea de a fi trase si mutate cu mouse-ul.
  Sintaxa:
$('selector').draggable({ optiune: valoare });
- optiune: valoare - reprezinta unul sau mai multe perechi optiune/valoare pentru configurarea functiei draggable(). Sunt o multime de optiuni pentru aceasta functie, iata cateva din ele: - Lista completa cu optiunile pentru metoda draggable() poate fi gasita la pagina: Draggable.

• Mtoda droppable() permite oricarui element din pagina sa devina "droppable" (in care pot fi lasate elementele "draggable", adica cele care pot fi trase cu mouse-ul).
  Sintaxa:
$('selector').droppable({ optiune: valoare });
- optiune: valoare - reprezinta unul sau mai multe perechi optiune/valoare pentru configurarea functiei droppable(). Iata cateva din ele: - Lista completa cu optiunile pentru metoda droppable() poate fi gasita la pagina: Droppable.

Exemplu 1:
Trei imagini si un DIV care pot fi mutati cu mouse-ul si plasati intr-un alt DIV. Cand elementele sunt trase si lasate in DIV-ul droppable, acestea dispar cu un efect animat (cu hide()). DIV-ul droppable contine un SPAN cu text "Click", cand se da click pe el reface vizibile acele elementele.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Drag si Drop</title>
<style type="text/css"><!--
#drop {
 width:200px;
 height:150px;
 margin:3px auto;
 background:#eddaa8;
 font-size:16px;
}
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
 width:450px;
 height:180px;
 margin:12px auto;
 border:1px solid silver;
 font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
 width:150px;
 height:50px;
 background:#07da08;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the draggable
  $('#drag .drg').draggable({
    cursor: 'move',          // seteaza aspectul cursorului
    revert: 'valid'
  });

  // sets droppable
  $('#drop').droppable({
    drop: function(event, ui) {
      // cand elementele trase sunt eliberate, sunt ascunse cu hide()
      ui.draggable.hide(1000);
    }
  });

  // la click pe "#sw" (din interiorul lui "#drop")
  // face vizibile elementele cu class="drg", continute in "#drag"
  $('#drop #sw').click(function(){
    $('#drag .drg').slideDown(1000);
  });
});
--></script>
</head>
<body>
<div id="drop">Plaseaza aici &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Click</span></div>
<div id="drag">
 Muta cu mouseul aceste imagini:<br />
 <img src="circle.gif" alt="cerc" width="45" height="45" class="drg" />
 <img src="triangle.gif" alt="triunghi" width="65" height="55" class="drg" />
 <img src="rhomb.gif" alt="romb" width="70" height="55" class="drg" />
 <div class="drg">Click si trageti cu mouse-ul acest DIV</div>
</div>
</body>
</html>
Demo:
Plaseaza aici         Click
Muta cu mouseul aceste imagini:
cerc triunghi romb
Click si trageti cu mouse-ul acest DIV

Exemplu 2:
Iata un alt exemplu, ca sa se vada diferenta si efectul cand sunt definite anumite optiuni. Se folosesc aceleasi elemente HTML, dar de aceasta data cu mai multe optiuni setate in functiile draggable() si droppable().
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Drag si Drop</title>
<style type="text/css"><!--
#drop {
 width:200px;
 height:150px;
 margin:3px auto;
 background:#eddaa8;
 font-size:16px;
}
#drop.drp { background:#f1ef08; }
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
 width:450px;
 height:180px;
 margin:12px auto;
 border:1px solid silver;
 font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
 width:150px;
 height:50px;
 background:#07da08;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // seteaza draggable si cateva optiuni
  $('#drag .drg').draggable({
    cursor: 'move',          // seteaza aspectul cursorului
    revert: 'invalid',       // face elementu tras sa revina la pozitia lui, daca nu e lasat in droppable
    revertDuration: 900,     // durata miscarii de revenire
    opacity: 0.35            // opacitatea elementului in timp ce e mutat
  });

  // definire optiuni pt. droppable
  $('#drop').droppable({
    accept: 'img.drg',            // accepta doar imagini cu class 'drg'
    activeClass: 'drp',           // adauga class "drp" cand un element acceptat e mutat
    drop: function(event, ui) {
      // cand elementele trase sunt eliberate, sunt ascunse cu hide()
      ui.draggable.hide(1000);
    }
  });

  // la click pe "#sw" (din interiorul lui "#drop")
  // face vizibile elementele cu class="drg", continute in "#drag"
  $('#drop #sw').click(function(){
    $('#drag .drg').slideDown(1000);
  });
});
--></script>
</head>
<body>
<div id="drop">Plaseaza aici &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Click</span></div>
<div id="drag">
 Muta cu mouseul aceste imagini:<br />
 <img src="circle.gif" alt="cerc" width="45" height="45" class="drg" />
 <img src="triangle.gif" alt="triunghi" width="65" height="55" class="drg" />
 <img src="rhomb.gif" alt="romb" width="70" height="55" class="drg" />
 <div class="drg">Click si trageti cu mouse-ul acest DIV</div>
</div>
</body>
</html>
- revert: 'invalid' - face elementele trase sa revina la pozitia de start daca sunt lasate in alt loc decat in droppable; iar - evertDuration: 900 - seteaza durata revenirii in 900 milisecunde.
- opacity: 0.35 - adauga transarenta la elementul tras cu mouse-ul.
- activeClass: 'drp' - adauga class "drp" la obiectul droppable, pe timpul cand un element acceptat e tras.

DIV-ul nu poate fi plasat in droppable deorece s-a definit optiunea:   accept: 'img.drg'   (accepta doar <img> cu class="drg").
In acest exemplu, cand se apasa pe textul "Click", elementele care au fost ascunse apar in locatia in care au disparut, dar in primul exemplu ele apar in locatia unde erau vizibile, aceasta diferenta e determinata de valorile "valid" si "invalid" date optiunii revert.
Demo:
Plaseaza aici         Click
Muta cu mouseul aceste imagini:
cerc triunghi romb
Click si trageti cu mouse-ul acest DIV

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Drag si Drop cu jQuery UI

Last accessed pages

  1. Data si Timp - Obiect Date (2)
  2. Incarcare imagini pe server si afisare cu Ajax (6)
  3. Curs si Tutoriale Ajax (66)
  4. Bubbles3 (3489)
  5. Prezentul simplu - Exercitii si teste incepatori (758)

Popular pages this month

  1. Bubbles3 (3489)
  2. Gramatica limbii engleze - Prezentare Generala (2797)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2526)
  4. Butterfly Kyodai (2204)
  5. Zuma Deluxe (2083)