Drag si Drop cu jQuery UI

Curs Javascript

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:

• axis - Restrange miscarea obiectului pe una din axele: orizontal (x), sau vertical (y). Posibile valori: 'x', 'y'.
• containment - Restrange posibilitatea de miscare a obiectului in interiorul unei suprafete definite sau a unui element. Valori posibile: 'parent', 'document', 'window', [x1, y1, x2, y2].
• cursor - Defineste aspectul cursorului in timp ce elementul e tras cu mouse-ul. Se folosesc aceleasi valori ca si in CSS: pointer, move, crosshair, help, etc.
• opacity - Opacitatea (sau transparenta) obiectului in timp ce e mutat.
• revert - Daca e setat "true", elementul va reveni la pozitia de start (de unde se incepe tragerea lui) dupa ce apasarea mouse-ului este eliberata. Posibile valori: 'valid', 'invalid', 'true', 'false'.
  Daca e setat "invalid", revenirea la pozitia de start se face doar daca obiectul tras nu e lasat intr-un loc "droppable" (un element special definit pentru a muta alte obiecte in el).
• revertDuration - Durata miscarii de revenire, in milisecunde (prestabilit: 500). Optiunea este ignorata daca revert e "false".
• zIndex - seteaza proprietatea z-index a elementului mutat.
• drag: function(event, ui) {...} - o functie care este executata cand elementul e tras cu mouse-ul.
  Parametrii "event" si "ui" sunt optional; "event" reprezinta evenimentul declansat, iar "ui" reprezinta obiectul UI:
          ui.position - pozitia obiectului (sus, stanga), relativa la elementul care-l contine.
          ui.offset - pozitia obiectului (sus, stanga), relativa la pagina.
• start: function(event, ui) {...} - o functie executata in momentul cand incepe mutarea elementului. Parametrii "event" si "ui" sunt optionali.
• stop: function(event, ui) {...} - o functie executata in momentul cand actiunea de tragere a obiectului e oprita si apasarea mouse-ului eliberata. Parametrii "event" si "ui" sunt optionali.

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

• accept - specifica elementele (selector) care sunt acceptate.
• activeClass - specifica o clasa CSS care va fi atribuita elementului "droppable" in timp ce un obiect "draggable" acceptat este mutat.
• hoverClass - specifica o clasa CSS care va fi atribuita elementului "droppable" cand mouse-ul este deasupra unui obiect "draggable" acceptat.
• activate: function(event, ui) { ... } - o functie care este executata cand incepe mutarea cu mouse-ul a unui element "draggable" acceptat. Parametrii "event" si "ui" sunt optionali.
    $(this) reprezinta elementul "droppable"
    ui.draggable reprezinta obiectul tras.
• drop: function(event, ui) { ... } - o functie care este executata cand elementul tras e lasat si eliberat peste "droppable".
  Parametrii "event" si "ui" sunt optionali.
  - $(this) reprezinta elementul "droppable"
  - ui.draggable reprezinta obiectul tras.

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

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

.some_class {
  line-height: 150%;
}

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

$ar_dir = scandir("dir_name");
var_export($ar_dir);

He will sleep there.
- El va dormi acolo.

Él dormirá allí.
- El va dormi acolo.