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

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.
jQuery UI draggable - Muta / Trage elemente

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)