Spraudnis Draggable – viens no vairākiem spraudņiem, kas ietilpst jQuery UI sastāvā, ar kuru palīdzību iespējams organizēt mijiedarbību starp web-lapas elementiem. Spraudnis Draggable ļauj izvēlētos web-lapas elementus izveidot par pārvietojamiem ar peles norādītāja palīdzību.
Novietojiet peles norādītāju uz zaļā kvadrāta, nospiediet un turiet peles kreiso pogu, un mēģiniet bloku vilkt uz citu vietu.
Un tagad apskatīsim, cik viegli to realizēt ….
Sākumā apmeklēsim izvēles lejuplādes lappusi jQuery UI mājaslapā, lai iegūtu mums nepieciešamos failus. Klikšķinām uz saites Deselect all component, lai atteiktos no liekā šajā reiuzē, pēc tam izvēlamies tikai to, kas mums šobrīd vajadzīgs – atzīmējam čekboksu Draggable un redzam, ka reizē ar to atzīmējies arī čekbokss UI Core. Spraudņa Draggable darbība ir no tā atkarīga, tālab arī tas mums nepieciešams.
Bez tam, labajā pusē atrodas izkrītošais saraksts, kurā mēs varam izvēlēties vēlamo noformējuma shēmu. Kad viss izvēlēts, spiežam pogu Download un saņemam arhīvu.
Sākumā savas mājaslapas sadaļā HEAD pieslēdzam nepieciešamos failus no saņemtā arhīva.
1 | <link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> |
2 | <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> |
3 | <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> |
Tātad, sākumā mēs pieslēdzām attiecīgās tēmas stilu failu css/le-frog/jquery-ui-1.7.2.custom.css. Pēc tam mēs pieslēdzām jQuery bibliotēkas failu – js/jquery-1.3.2.min.js un failu js/jquery-ui-1.7.2.custom.min.js, kurā apvienoti UI funkcionalitātes kodols un mūsu izvēlētais spraudnis Draggable (patiesībā dēļ šī raksta piemēriem tas satur arī spraudņus плагинов Droppable un Sortable).
Skatāmies HTML-izkārtojumu. Pieņemsim, ka tas mums izskatīsies šādi:
1 | <div id="draggable" class="ui-widget-content"> |
2 | <p>Drag me</p> |
3 | </div> |
Sasaistām spraudņa Draggable funkcionalitāti ar izvēlēto elementu:
1 | $(function(){ |
2 | $("#draggable").draggable(); |
3 | }); |
Līdz šim mēs izmantojām spraudni Draggable ar uzstādījumiem pēc noklusējuma. Taču tam var tikt uzstādītas vairāk kā 20 dažādas opcijas, kuras palīdz spraudni pielāgot konkrētas izmantošanas nosacījumiem.
Mēģināsim pievienot spraudnim dažus uzstādījumus:
1 | $(function(){ |
2 | $("#draggable").draggable({ |
3 | cursor: "move", |
4 | revert: true, |
5 | revertDuration: 3000 |
6 | }); |
7 | }); |
Šeit mēs izmainījām kursora izskatu elementa pārvietošanās laikā, un panācām to, ka pēc pārvietošanas beigām elements patstāvīgi atgriežas sākumpozīcijā 3 sekunžu laikā.
Pārējās opcijas tiek izmantotas līdzīgā veidā, galvenais – zināt to nosaukumus un saprast to nozīmi.
addClasses – pēc noklusējuma šai opcijai ir piešķirta vērtība true. Ja tiek uzstādīta vērtība false, tad tas novērsīs klases ui-draggable pievienošanu pārvietomajamiem elementiem. Tas var kļūt vajadzīgs optimizācijas nolūkos pie metodes .draggable() izsaukšanas, piemēram, ja mums ir vairāki simti pārvietojamo elementu.
appendTo – pēc noklusējuma šai opcijai ir piešķirta vērtība
‘parent’. Ar to var tikt nodots jQuery selektors vai elements, kurš tiks izmantots kā konteiners objektam, kas kalpos kā pārvietojamais elements.
axis – piespiež pārvelkamo elementu pārvietoties tikai pa x asi vai tikai pa y asi. Vērtība pēc noklusējuma ir false, kas ļauj elementam pārvietoties visos virzienos.
cancel – pēc noklusējuma šai opcijai ir piešķirta vērtība ‘input,
option’. Ja norādītie elementi atrodas pārvietojamā elementa iekšpusē, tad pārvietojamo elementu nevar nofiksēt priekš pārvilkšanas, kursoram atrodoties virs norādītajiem elementiem. Elementu izvēlnei tiek izmantots jQuery selektors.
connectToSortable – atļauj pārvietojamo elementu "iemešanu" sarakstā ar šķirošanas iespējām. Pie kam "iemestais" elements kļūst par saraksta daļu. Kā vērtība tiek norādīts jQuery selektors. Pēc noklusējuma piešķirta vērtība false. Korektai darbībai nepieciešams paralēli izmantot opciju helper ar vērtību ‘clone’.
containment – ierobežo pārvietošanos noteikta elementa vai apgabala robežās. Kā vērtība var tikt uzstādīts jQuery selektors, elements, rinda vai masīvs. Iespējamo vērtību piemēri:
‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2].
cursor – rinda, ar kuru var tikt nodota CSS vērtība, kura noteiks kursora izskatu elementa pārvilkšanas laikā. Pēc noklusējuma – auto.
cursorAt – pie elementa pārvilkšanas uzstāda kursoru noteiktā pozīcijā. Piemēram, vērtība {left: 5, top: 10}, pie elementa pārvietošanas uzstādīs kursoru 10 pikseļus no augšējās malas un 5 pikseļus no kreisās malas.
delay – elementa pārvietošanās sākuma laika aizture milisekundēs. Opcija tiek izmantota lai novērstu nevēlamu elementa pārvietošanu dēļ nejauša klikšķa uz tā. Pēc noklusējuma vērtība ir 0.
distance – attālums pikseļos, par kuru jāpārvietojas kursoram pie nospiestas peles kreisās pogas, pirms sāksies elementa kustība. Opcija tiek izmantota lai novērstu nevēlamu elementa pārvietošanu dēļ nejauša klikšķa uz tā. Pēc noklusējuma vērtība ir 1.
grid – liek pārvelkamajam elementam pārvietoties diskrēti, pa koordinātu tīklu, kurš opcijā tiek uzstādīts kā vērtību masīvs. Pēc noklusējuma vērtība ir false, kas ļauj elementam pārvietoties brīvi. Piešķiramo vērtību piemērs – [10, 10].
handle – šajā opcijā var noteikt elementu, atrodošos pārvietojamā elementa iekšienē, aiz kura varēs tikt "aizķerts" ar peles kursoru pārvietojamais elements. Elementa izvēlei var tikt izmantots jQuery selektors.
helper – opcijas iespējamās vērtības – ‘original’,
‘clone’, Function. Pēc noklusējuma uzstādīta vērtība ‘original’ – vizuāli novērojama paša elementa pārvietošanās. Izmantojot vērtību ‘clone’ pārvietosies elementa klons, bet pats elements paliks savā pozīcijā. В опции можно определить функцию. Funkcijai obligāti jāatgriež DOM elements.
iframeFix – pēc noklusējuma uzstādīta vērtība false. Ja uzstāda vērtību true, elementa pārvietošana tiks pārtraukta, ja kursors pārvilkšanas laikā nonāks virs elementa iframe. Kā vērtību var izmantot jQuery selektoru – tādā gadījumā pārvilkšanu var pārtraukt attiecībā tikai uz konkrētiem iframe elementiem. Opcija noder, izmantojot to kopīgi ar, piemēram, cursorAt.
opacity – uzstāda elementam CSS ipašību opacity, brīdī, kad elements atrodas kustībā. Pēc noklusējuma uzstādīta vērtība false, kas atbilst necaurspīdīgumam.
refreshPositions – Pēc noklusējuma uzstādīta vērtība
false. Pie vērtības true elementa "nomešanas" pozīcija tiks pārskaitļota pie katra notikuma mousemove. Izmantot uzmanīgi! Lai arī šāda pieeja ļauj izveidot ļoti dinamisku programmu, tā tomēr ievērojami samazinās ātrdarbību.
revert – Pēc noklusējuma uzstādīta vērtība – false. Ja vērtību uzstādīt kā true, tad elements pēc pārvietošanas beigām atgriezīsies savā sākumpozīcijā. Vērtību var nodot arī kā rindu. Iespējamās vērtības – ‘valid’ vai ‘invalid’. Šīs vērtības tiek izmantotas gadījumā, ja pārvietojamais elements tiks "nomests" kādā mērķa elementā. Izmantojot vērtību ‘valid’ pārvietojamais elements atgriezīsies savā sākumstāvoklī tikai tad, ja tas bijis jau "iemests" mērķa elementā. Izmantojot vērtību ‘invalid’ pārvietojamais elements NEatgriezīsies savā sākumstāvoklī tikai tad, ja tas bijis jau "iemests" mērķa elementā.
revertDuration – elementa atgriešanās sākumpozīcijā efekta ilgums milisekundēs. Noklusētā vērtība ir 500. Opcija tiek ignorēta, ja opcijai revert piešķirta vērtība
false.
scope – šīs opcijas vērtība ir rinda. Pēc noklusējuma uzstādīta vērtība ‘default’. Pārvietojamie elementi, kuriem opcijā scope ir tāda pati vērtība, kā opcijas scope vērtība priekš elementiem ar funkcionalitāti droppable, tiks uztverti no šiem elementiem. Pēc būtības, papildina spraudņa Droppable opciju accept.
scroll – Pēc noklusējuma uzstādīta vērtība true – pārvietojot elementu aiz loga malas, loga platība automātiski tiks palielināta. Uzstādot vērtību false, šāda iespēja tiks aizliegta.
scrollSensitivity – skaitlis, kurš nosaka attālumu pikseļos no loga malas, pēc kura sasniegšanas logs sāks paplašināties. Attālums tiek noteikts attiecībā pret peles kursoru, bet ne pret pārvietojamo elementu. Pēc noklusējuma uzstādīta vērtība 20.
scrollSpeed – skaitlis, kurš nosaka ātrumu, ar kādu paplašinās apskates logs peles kursoram nonākot attālumā no loga malas, kāds uzstādīts opcijā scrollSensitivity. Pēc noklusējuma uzstādīta vērtība 20.
snap – Pēc noklusējuma uzstādīta vērtība false. Ja uzstāda vērtību true (kas ir ekvivalents ‘.ui-draggable’, par cik vērtību var noteikt arī ar jQuery selektoru), tad pārvietojamais elements "pielips" pie izvēlēto elementu malām, kad tas tiks virzīts gar tiem.
snapMode – opcija nosaka, kā tieši pārvietojamais elements "pielips" pie izvēlēto elementu malām. Piemēram, tikai pie elementu ārmalām, vai tikai pie iekšmalām. Iespējamās vērtības
‘inner’, ‘outer’, ‘both’. Jebkura vērtība tiek ignorēta, ja snap: false. Pēc noklusējuma uzstādīta vērtība ‘both’.
snapTolerance – attālums pikseļos no pārvietojamā elementa līdz izvēlētajam, pie kura notiks "pielipšana". Pēc noklusējuma uzstādīta vērtība 20. Jebkura vērtība tiek ignorēta, ja snap:
false.
stack – objekts, ar kura palīdzību tiek automātiski kontrolēta īpašība z-index konkrētai pārvietojamo elementu grupai, kas ļauj pārvietojamo elementu vienmēr novietot virs citiem elementiem. Īpašības ‘group’ vērtību nosaka jQuery selektors. Papildus var noteikt īpašību ‘min’, mazāk par kuru z-index vērtība nevarēs būt noteikta. Piemēram:
$(‘.selector’).draggable({ stack: { group: ‘.selector’, min: 50 } });
zIndex – skaitlis, kurš nosaka pārvietojamā elementa z-index īpašības vērtību. Pēc noklusējuma uzstādīta vērtība false.
Bez iespējas noskaņot spraudņa Draggable opcijas, iespējams to piespiest reaģēt uz noteiktiem notikumiem.Lūk piemērs:
01 | $(function(){ |
02 | $("#draggable").draggable({ |
03 | cursor: "move", |
04 | stop: function(event, ui) { |
05 | alert("Notikums: " + event.type + |
06 | "\n\ntop: " + ui.offset.top + |
07 | " px\nleft: " + ui.offset.left + |
08 | " px"); |
09 | } |
10 | }); |
11 | }); |
Mēs noteicām opcijā stop callback-funkciju. Funkcija spēj pieņemt divus argumentus – objektus event un ui. Vienkāršā piemērā parādīts, kādā veidā iespējams griezties pie šo objektu īpašībām. Gala iznākumā, beidzoties objekta pārvietošanai, brīdinājuma logā mēs ieraudzīsim informāciju par iestājušās notikuma tipu – dragstop, un elementa tekošo absolūto pozīciju uz ekrāna.
Opcijas, kuras saistītas ar notikumiem, ir trīs:
Opcija start – notikums dragstart iestājas ik reizi, uzsākot pārvietot elementu.
Opcija drag – notikums drag ilgst visu laiku, kāmēr elements tiek pārvietots.
Opcija stop – notikums dragstop iestājas ik reizi elementa pārvietošanas beigās.
Jebkura callback-funkcija, aprakstīta opcijās start, drag vai stopvar pieņemt divus argumentus – event un ui. Objekts event – tas ir notikuma objekts, bet objekts ui – speciāls objekts, kura īpašības satur šādu informāciju:
ui.helper – objekts, kurš apraksta elementu, kas tiek pārvietots;
ui.position – objekts, kura īpašības top un left satur informāciju par pārvietojamā elementa pozīciju attiecībā pret mātes-elementa augšējo un kreiso malām;
ui.offset – objekts, kura īpašības top un left satur informāciju par pārvietojamā elementa
absolūto pozīciju (atkāpe no loga nulles punkta - augšējā kreisā stūra);
Atlicis vēl iepazīties ar spraudņa Draggable metodēm. Bet priekš tā mums nāksies pievienot mūsu HTML-struktūrā pāris pogas. Lūk šādi:
1 | <button id="getOption">Get Option</button> |
2 | <button id="setOption">Set Option</button> |
Nākamajā piemērā parādīts, kā uzstādīt un nolasīt spraudņa opciju vērtības pēc tā inicializācijas:
01 | $(function(){ |
02 | $("#draggable").draggable({ |
03 | cursor: "move" |
04 | }); |
05 | $("#getOption").click(function(){ |
06 | alert($("#draggable").draggable("option","grid")); |
07 | }); |
08 | $("#setOption").click(function(){ |
09 | $("#draggable").draggable("option","grid",[50,50]); |
10 | }); |
11 | }); |
Ar pogām Get Option un Set Option mēs sasaistījām notikumu click. Pēc klikšķa uz pogas Get Option mēs izsaucam metodi option, kuras nosaukumu norādām pirmajā argumentā, bet otrajā argumentā norādām tās opcijas nosaukumu, kuras vērtību vēlamies uzzināt. Rezultātā ieraudzīsim brīdinājuma logu, kurā tiks uzrādīta vērtība false, par cik pie inicializācijas šī opcija netika noteikta, bet pēc noklusējuma tai ir tieši šāda vērtība.
Pamēģiniet pārvilkt elementu ar peli – tas brīvi pārvietosies jebkurā virzienā.
Uzklikšķināsim pogai Set Option, vēlreiz izsaucot metodi option, bet tagad jau mēs tai nododam trīs argumentus. Pirmais – metodes nosaukums, otrais – opcijas nosaukums, kuras vērtību vēlamies mainīt, un trešais arguments – opcijas jaunā vērtība. Tādējādi, nododot opcijai grid vērtību [50,50] mēs liksim elementam pārvietoties "ar lēcieniem", pa tīklu ar soli 50х50 pikseļi.
Spraudņa Draggable pieejamās metodes:
destroy – .draggable(‘destroy’) atceļ pilnīgi visu spraudņa Draggable funkcionalitāti. Atgriež elementus pirmsinicializācijas stāvoklī.
disable – .draggable(‘disable’) uz laiku aizliedz spraudņa funkcionalitāti. Atjaunot to iespējams ar metodi enable.
enable – .draggable(‘enable’) atjauno spraudņa funkcionalitāti, ja pirms tam tā bija apturēta ar metodi disable.
option – .draggable(‘option’, optionName, [value]) ar šīs metodes palīdzību iespējams saņemt vai uzstādīt spraudņa jebkuras opcijas vērtību pēc tā inicializācijas.
Visi piemēri, kuri apskatīti rakstā, lejuplādējami šajā arhīvā.
