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 HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
jQuery UI draggable - Muta / Trage elemente

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (45989)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (37472)
  3. Substantive - Exercitii si teste engleza incepatori (11223)
  4. Baze de date SQL 2 (1441)
  5. Notiuni fundamentale despre bazele de date SQL (5710)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2281)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1217)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1105)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (764)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (742)