online: 2; azi: 213; total: 52219 Webdesign - Jquery - 17

jQuery UI draggable - Muta /Trage elemente

Pentru a crea usor efectul de tragere cu mouse-ul a elementelor din pagina cu jQuery, se foloseste 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

Metoda draggable()

Pentru a crea posibilitatea ca anumite elemente sa poata fi trase /mutate in pagina cu mouse-ul, se foloseste metoda draggable().
Aceasta functie are urmatoarea 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 metoda, 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', '#un_element', '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.
  • cursorAt - seteaza pozitia cursorului, relativ la element, in timp ce acesta este tras. Pozitia se definiste cu una sau doua din urmatoarele valori: { top:valoare, left:valoare, right:valoare, bottom:valoare } ; "valoare" e un numar ce seteaza distanta in pixeli.
  • handle - specifica o portiune, un element (selector) din interiorul obiectului, pe care se poate apasa click si trage tot obiectul.
  • 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".
  • stack - Valoarea acestei optiune trebuie sa fie un selector. Aduce in fata elementul tras, daca se potriveste cu selectorul specificat.
  • 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.helper - returneaza un obiect jQuery cu text sau element care apare cand un tag HTML e tras cu mouse-ul.
            ui.position - pozitia obiectului (top, left), relativa la elementul care-l contine.
            ui.offset - pozitia obiectului (top, left), 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.

Exemplu 1:
Tragere cu mouse-ul o imagine si un tag DIV. Imaginea poate fi mutata in orice directie; DIV-ul poate fi tras doar pe orizontala. Se foloseste optiunea "stack" pentru a fi adusi in fata dupa actiunea de tragere cu mouse-ul. 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging</title>
<style type="text/css"><!--
#dg2 {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></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 elementull "#dg1" sa poata fi tras; definire cateva optiuni
  $('#dg1').draggable({
    cursor: 'move',        // seteaza aspectul cursorului
    opacity: 0.35,         // opacitatea elementului in timp ce e mutat
    stack: $('#dg1')       // aduce elementul "#dg1" in fata
  });

  // sets the '#dg2' element as draggable
  $('#dg2').draggable({
    cursor: 'pointer',      // aspectul cursorului
    opacity: 0.35,          // opacitatea elementului in timp ce e mutat
    stack: $('#dg2'),       // aduce elementul "#dg2" in fata
    axis: 'x'               // permite tragerea doar pe linia orizontala
  });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<img src="rhomb.gif" alt="Romb" width="80" height="70" id="dg1" />
<div id="dg2">Poate fi tras doar pe orizontala,<br />
Cursor setat cu valoare "pointer".</div>
</body>
</html>
Demo:

Apasati click si mutati:

Romb
Poate fi tras doar pe orizontala,
Cursor setat cu valoare "pointer".

Exemplu 2:
Tragere si revert cu o durata a revenirii de 900 milisecunde. Cand DIV-ul e tras, cursorul e adus in partea stanga (datorita optiunii cursorAt: {left: 8}). 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu revert</title>
<style type="text/css"><!--
div.dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></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 elements with class="dg" as draggable and define some options
  $('.dg').draggable({
    cursor: 'move',        // seteaza aspectul cursorului
    opacity: 0.35,         // opacitatea elementului in timp ce e mutat
    revert: true,          // determina elementul sa revina la locatia initiala
    revertDuration: 900
  });

  // seteaza inca o option (cursorAt), dar numai pt. DIV cu class="dg"
  $('div.dg').draggable({ cursorAt: {left: 8} });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<img src="rhomb.gif" alt="Romb" width="80" height="70" class="dg" />
<div class="dg">DIV draggable cu revert.<br />
Cursorul e adus in partea stanga.</div>
</body>
</html>
Demo:

Apasati click si mutati:

Romb
DIV draggable cu revert.
Cursorul e adus in partea stanga.

Exemplu 3:
Utilizare optiune handle pentru a putea muta un element doar atunci cand cursorul e pe o anumita portiune din el. Un DIV ce contine un tag <h5> si un paragraf. DIV-ul poate fi tras doar cand mouse-ul este peste zona cu tag-ul H5. 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu handle</title>
<style type="text/css"><!--
#dg { width:225px; border:1px solid blue; }
#dg h5 { margin:1px; background:#07da08; cursor:pointer; text-decoration:underline; text-align:center; }
#dg p { margin:10px 3px 0px 3px; background:#d7d8fe; }
--></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 sa poata fi tras elementul cu id="dg"
  $('#dg').draggable({
    // permite mutarea doar cand cursorul e pe elementul H5
    handle: 'h5'
  });
});
--></script>
</head>
<body>
<div id="dg">
 <h5>Apasati click si mutati</h5>
 <p>Curs jQuery:<br />
 <i>www.discant.ro/javascript/</i></p>
</div>
</body>
</html>
Demo:
Apasati click si mutati

Curs jQuery:
www.discant.ro/javascript/


Exemplu 4:
Restrange posibilitatea de mutare a unei imaginii doar in cadrul unui DIV cu id="drg". Restrange tragerea unui paragraf doar in cadrul elementului parinte (in care e adaugat). 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu containment</title>
<style type="text/css"><!--
#drg {
 width:380px;
 height:210px;
 border:2px solid blue;
}
#prt {
 width:305px;
 height:100px;
 margin:8px;
 background:#efefef;
}
#prt p { width:185px; margin:1px; background:#a7daa8; }
--></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 sa poata fi tras tag-ul cu id="im"
  $('#im').draggable({
    cursor: 'move',        // aspectul cursorului
    containment: '#drg'    // permite mutarea doar in cadrul elementului "#drg"
  });

  // seteaza sa poata fi tras orice paragraf adaugat in #prt
  $('#prt p').draggable({
    cursor: 'move',
    // mutarea se poate efectua doar in limitele elementului parinte
    containment: 'parent'
  });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<div id="drg">
 elementul #drg<br />
 <img src="rhomb.gif" alt="Romb" width="80" height="70" id="im" />
 <div id="prt">
  <p>Acest paragraf poate fi mutat doar in elementul parinte</p>
 </div>
</div>
</body>
</html>
Demo:

Apasati click si mutati:

elementul #drg
Romb

Acest paragraf poate fi mutat doar in elementul parinte


Exemplu 5:
Utilizare evenimente "start" si "stop" pentru a obtine directia si distanta mutarii (in pixeli), care apoi sunt afisate intr-o fereastra Alert. 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging - obtine directie si distanta</title>
<style type="text/css"><!--
#dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
 cursor:pointer;
}
--></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"><!--
// seteaza doua variabile in care vor fi retinute pozitiile X si Y
var xpos; var ypos;

$(document).ready(function() {
  // seteaza sa poata fi tras tag-ul cu id="dg"
  $('#dg').draggable({
    // retine pozitia initiala X si Y cand incepe mutarea
    start: function(event, ui) {
      xpos = ui.position.left;
      ypos = ui.position.top;
    },
    // cand tragerea se opreste si click-ul e eliberat
    stop: function(event, ui) {
      // calculeaza distanta de miscare, folosind pozitia curenta X si Y din care scade "xpos" si "ypos"
      var xmove = ui.position.left - xpos;dreapta
      var ymove = ui.position.top - ypos;

      // defineste directia miscarii: dreapta, jos (pt. pozitiv), stanga, sus (pt. negativ)
      var xd = xmove >= 0 ? ' La dreapta: ' : ' La stanga: ';
      var yd = ymove >= 0 ? ' In jos: ' : ' In sus: ';

      alert('DIV-ul a fost mutat,\n\n'+ xd+ xmove+ ' pixeli \n'+ yd+ ymove+ ' pixeli');
    }
  });
});
--></script>
</head>
<body>
<div id="dg">Apasati click si mutati<br />
Va afisa o fereastra Alert cu directia si distanta pe axa X/Y.</div>
</body>
</html>
Demo:
Apasati click si mutati
Va afisa o fereastra Alert cu directia si distanta pe axa X/Y.