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.
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:
Poate fi tras doar pe orizontala,
Cursor setat cu valoare "pointer".
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:
DIV draggable cu revert.
Cursorul e adus in partea stanga.
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>marplo.net/javascript/</i></p>
</div>
</body>
</html>
Demo:
Apasati click si mutati
Curs jQuery:
marplo.net/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
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.
Va afisa o fereastra Alert cu directia si distanta pe axa X/Y.