1 /** |
|
2 * Interface Elements for jQuery |
|
3 * Draggable |
|
4 * |
|
5 * http://interface.eyecon.ro |
|
6 * |
|
7 * Copyright (c) 2006 Stefan Petre |
|
8 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
9 * and GPL (GPL-LICENSE.txt) licenses. |
|
10 */ |
|
11 |
|
12 /** |
|
13 * Create a draggable element with a number of advanced options including callback, Google Maps type draggables, |
|
14 * reversion, ghosting, and grid dragging. |
|
15 * |
|
16 * @name Draggable |
|
17 * @descr Creates draggable elements that can be moved across the page. |
|
18 * @param Hash hash A hash of parameters. All parameters are optional. |
|
19 * @option String handle (optional) The jQuery selector matching the handle that starts the draggable |
|
20 * @option DOMElement handle (optional) The DOM Element of the handle that starts the draggable |
|
21 * @option Boolean revert (optional) When true, on stop-drag the element returns to initial position |
|
22 * @option Boolean ghosting (optional) When true, a copy of the element is moved |
|
23 * @option Integer zIndex (optional) zIndex depth for the element while it is being dragged |
|
24 * @option Float opacity (optional) A number between 0 and 1 that indicates the opacity of the element while being dragged |
|
25 * @option Integer grid (optional) (optional) A number of pixels indicating the grid that the element should snap to |
|
26 * @option Array grid (optional) A number of x-pixels and y-pixels indicating the grid that the element should snap to |
|
27 * @option Integer fx (optional) Duration for the effect (like ghosting or revert) applied to the draggable |
|
28 * @option String containment (optional) Define the zone where the draggable can be moved. 'parent' moves it inside parent |
|
29 * element, while 'document' prevents it from leaving the document and forcing additional |
|
30 * scrolling |
|
31 * @option Array containment An 4-element array (left, top, width, height) indicating the containment of the element |
|
32 * @option String axis (optional) Set an axis: vertical (with 'vertically') or horizontal (with 'horizontally') |
|
33 * @option Function onStart (optional) Callback function triggered when the dragging starts |
|
34 * @option Function onStop (optional) Callback function triggered when the dragging stops |
|
35 * @option Function onChange (optional) Callback function triggered when the dragging stop *and* the element was moved at least |
|
36 * one pixel |
|
37 * @option Function onDrag (optional) Callback function triggered while the element is dragged. Receives two parameters: x and y |
|
38 * coordinates. You can return an object with new coordinates {x: x, y: y} so this way you can |
|
39 * interact with the dragging process (for instance, build your containment) |
|
40 * @option Boolean insideParent Forces the element to remain inside its parent when being dragged (like Google Maps) |
|
41 * @option Integer snapDistance (optional) The element is not moved unless it is dragged more than snapDistance. You can prevent |
|
42 * accidental dragging and keep regular clicking enabled (for links or form elements, |
|
43 * for instance) |
|
44 * @option Object cursorAt (optional) The dragged element is moved to the cursor position with the offset specified. Accepts value |
|
45 * for top, left, right and bottom offset. Basically, this forces the cursor to a particular |
|
46 * position during the entire drag operation. |
|
47 * @option Boolean autoSize (optional) When true, the drag helper is resized to its content, instead of the dragged element's sizes |
|
48 * @option String frameClass (optional) When is set the cloned element is hidden so only a frame is dragged |
|
49 * @type jQuery |
|
50 * @cat Plugins/Interface |
|
51 * @author Stefan Petre |
|
52 */ |
|
53 |
|
54 jQuery.iDrag = { |
|
55 helper : null, |
|
56 dragged: null, |
|
57 destroy : function() |
|
58 { |
|
59 return this.each( |
|
60 function () |
|
61 { |
|
62 if (this.isDraggable) { |
|
63 this.dragCfg.dhe.unbind('mousedown', jQuery.iDrag.draginit); |
|
64 this.dragCfg = null; |
|
65 this.isDraggable = false; |
|
66 if(jQuery.browser.msie) { |
|
67 this.unselectable = "off"; |
|
68 } else { |
|
69 this.style.MozUserSelect = ''; |
|
70 this.style.KhtmlUserSelect = ''; |
|
71 this.style.userSelect = ''; |
|
72 } |
|
73 } |
|
74 } |
|
75 ); |
|
76 }, |
|
77 draginit : function (e) |
|
78 { |
|
79 if (jQuery.iDrag.dragged != null) { |
|
80 jQuery.iDrag.dragstop(e); |
|
81 return false; |
|
82 } |
|
83 var elm = this.dragElem; |
|
84 jQuery(document) |
|
85 .bind('mousemove', jQuery.iDrag.dragmove) |
|
86 .bind('mouseup', jQuery.iDrag.dragstop); |
|
87 elm.dragCfg.pointer = jQuery.iUtil.getPointer(e); |
|
88 elm.dragCfg.currentPointer = elm.dragCfg.pointer; |
|
89 elm.dragCfg.init = false; |
|
90 elm.dragCfg.fromHandler = this != this.dragElem; |
|
91 jQuery.iDrag.dragged = elm; |
|
92 if (elm.dragCfg.si && this != this.dragElem) { |
|
93 parentPos = jQuery.iUtil.getPosition(elm.parentNode); |
|
94 sliderSize = jQuery.iUtil.getSize(elm); |
|
95 sliderPos = { |
|
96 x : parseInt(jQuery.css(elm,'left')) || 0, |
|
97 y : parseInt(jQuery.css(elm,'top')) || 0 |
|
98 }; |
|
99 dx = elm.dragCfg.currentPointer.x - parentPos.x - sliderSize.wb/2 - sliderPos.x; |
|
100 dy = elm.dragCfg.currentPointer.y - parentPos.y - sliderSize.hb/2 - sliderPos.y; |
|
101 jQuery.iSlider.dragmoveBy(elm, [dx, dy]); |
|
102 } |
|
103 return jQuery.selectKeyHelper||false; |
|
104 }, |
|
105 |
|
106 dragstart : function(e) |
|
107 { |
|
108 var elm = jQuery.iDrag.dragged; |
|
109 elm.dragCfg.init = true; |
|
110 |
|
111 var dEs = elm.style; |
|
112 |
|
113 elm.dragCfg.oD = jQuery.css(elm,'display'); |
|
114 elm.dragCfg.oP = jQuery.css(elm,'position'); |
|
115 if (!elm.dragCfg.initialPosition) |
|
116 elm.dragCfg.initialPosition = elm.dragCfg.oP; |
|
117 |
|
118 elm.dragCfg.oR = { |
|
119 x : parseInt(jQuery.css(elm,'left')) || 0, |
|
120 y : parseInt(jQuery.css(elm,'top')) || 0 |
|
121 }; |
|
122 elm.dragCfg.diffX = 0; |
|
123 elm.dragCfg.diffY = 0; |
|
124 if (jQuery.browser.msie) { |
|
125 var oldBorder = jQuery.iUtil.getBorder(elm, true); |
|
126 elm.dragCfg.diffX = oldBorder.l||0; |
|
127 elm.dragCfg.diffY = oldBorder.t||0; |
|
128 } |
|
129 |
|
130 elm.dragCfg.oC = jQuery.extend( |
|
131 jQuery.iUtil.getPosition(elm), |
|
132 jQuery.iUtil.getSize(elm) |
|
133 ); |
|
134 if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') { |
|
135 dEs.position = 'relative'; |
|
136 } |
|
137 |
|
138 jQuery.iDrag.helper.empty(); |
|
139 var clonedEl = elm.cloneNode(true); |
|
140 |
|
141 jQuery(clonedEl).css( |
|
142 { |
|
143 display: 'block', |
|
144 left: '0px', |
|
145 top: '0px' |
|
146 } |
|
147 ); |
|
148 clonedEl.style.marginTop = '0'; |
|
149 clonedEl.style.marginRight = '0'; |
|
150 clonedEl.style.marginBottom = '0'; |
|
151 clonedEl.style.marginLeft = '0'; |
|
152 jQuery.iDrag.helper.append(clonedEl); |
|
153 |
|
154 var dhs = jQuery.iDrag.helper.get(0).style; |
|
155 |
|
156 if (elm.dragCfg.autoSize) { |
|
157 dhs.width = 'auto'; |
|
158 dhs.height = 'auto'; |
|
159 } else { |
|
160 dhs.height = elm.dragCfg.oC.hb + 'px'; |
|
161 dhs.width = elm.dragCfg.oC.wb + 'px'; |
|
162 } |
|
163 |
|
164 dhs.display = 'block'; |
|
165 dhs.marginTop = '0px'; |
|
166 dhs.marginRight = '0px'; |
|
167 dhs.marginBottom = '0px'; |
|
168 dhs.marginLeft = '0px'; |
|
169 |
|
170 //remeasure the clone to check if the size was changed by user's functions |
|
171 jQuery.extend( |
|
172 elm.dragCfg.oC, |
|
173 jQuery.iUtil.getSize(clonedEl) |
|
174 ); |
|
175 |
|
176 if (elm.dragCfg.cursorAt) { |
|
177 if (elm.dragCfg.cursorAt.left) { |
|
178 elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x - elm.dragCfg.cursorAt.left; |
|
179 elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.cursorAt.left; |
|
180 } |
|
181 if (elm.dragCfg.cursorAt.top) { |
|
182 elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.cursorAt.top; |
|
183 elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.cursorAt.top; |
|
184 } |
|
185 if (elm.dragCfg.cursorAt.right) { |
|
186 elm.dragCfg.oR.x += elm.dragCfg.pointer.x - elm.dragCfg.oC.x -elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.right; |
|
187 elm.dragCfg.oC.x = elm.dragCfg.pointer.x - elm.dragCfg.oC.wb + elm.dragCfg.cursorAt.right; |
|
188 } |
|
189 if (elm.dragCfg.cursorAt.bottom) { |
|
190 elm.dragCfg.oR.y += elm.dragCfg.pointer.y - elm.dragCfg.oC.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom; |
|
191 elm.dragCfg.oC.y = elm.dragCfg.pointer.y - elm.dragCfg.oC.hb + elm.dragCfg.cursorAt.bottom; |
|
192 } |
|
193 } |
|
194 elm.dragCfg.nx = elm.dragCfg.oR.x; |
|
195 elm.dragCfg.ny = elm.dragCfg.oR.y; |
|
196 |
|
197 if (elm.dragCfg.insideParent || elm.dragCfg.containment == 'parent') { |
|
198 parentBorders = jQuery.iUtil.getBorder(elm.parentNode, true); |
|
199 elm.dragCfg.oC.x = elm.offsetLeft + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.l : parentBorders.l); |
|
200 elm.dragCfg.oC.y = elm.offsetTop + (jQuery.browser.msie ? 0 : jQuery.browser.opera ? -parentBorders.t : parentBorders.t); |
|
201 jQuery(elm.parentNode).append(jQuery.iDrag.helper.get(0)); |
|
202 } |
|
203 if (elm.dragCfg.containment) { |
|
204 jQuery.iDrag.getContainment(elm); |
|
205 elm.dragCfg.onDragModifier.containment = jQuery.iDrag.fitToContainer; |
|
206 } |
|
207 |
|
208 if (elm.dragCfg.si) { |
|
209 jQuery.iSlider.modifyContainer(elm); |
|
210 } |
|
211 |
|
212 dhs.left = elm.dragCfg.oC.x - elm.dragCfg.diffX + 'px'; |
|
213 dhs.top = elm.dragCfg.oC.y - elm.dragCfg.diffY + 'px'; |
|
214 //resize the helper to fit the clone |
|
215 dhs.width = elm.dragCfg.oC.wb + 'px'; |
|
216 dhs.height = elm.dragCfg.oC.hb + 'px'; |
|
217 |
|
218 jQuery.iDrag.dragged.dragCfg.prot = false; |
|
219 |
|
220 if (elm.dragCfg.gx) { |
|
221 elm.dragCfg.onDragModifier.grid = jQuery.iDrag.snapToGrid; |
|
222 } |
|
223 if (elm.dragCfg.zIndex != false) { |
|
224 jQuery.iDrag.helper.css('zIndex', elm.dragCfg.zIndex); |
|
225 } |
|
226 if (elm.dragCfg.opacity) { |
|
227 jQuery.iDrag.helper.css('opacity', elm.dragCfg.opacity); |
|
228 if (window.ActiveXObject) { |
|
229 jQuery.iDrag.helper.css('filter', 'alpha(opacity=' + elm.dragCfg.opacity * 100 + ')'); |
|
230 } |
|
231 } |
|
232 |
|
233 if(elm.dragCfg.frameClass) { |
|
234 jQuery.iDrag.helper.addClass(elm.dragCfg.frameClass); |
|
235 jQuery.iDrag.helper.get(0).firstChild.style.display = 'none'; |
|
236 } |
|
237 if (elm.dragCfg.onStart) |
|
238 elm.dragCfg.onStart.apply(elm, [clonedEl, elm.dragCfg.oR.x, elm.dragCfg.oR.y]); |
|
239 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){ |
|
240 jQuery.iDrop.highlight(elm); |
|
241 } |
|
242 if (elm.dragCfg.ghosting == false) { |
|
243 dEs.display = 'none'; |
|
244 } |
|
245 return false; |
|
246 }, |
|
247 |
|
248 getContainment : function(elm) |
|
249 { |
|
250 if (elm.dragCfg.containment.constructor == String) { |
|
251 if (elm.dragCfg.containment == 'parent') { |
|
252 elm.dragCfg.cont = jQuery.extend( |
|
253 {x:0,y:0}, |
|
254 jQuery.iUtil.getSize(elm.parentNode) |
|
255 ); |
|
256 var contBorders = jQuery.iUtil.getBorder(elm.parentNode, true); |
|
257 elm.dragCfg.cont.w = elm.dragCfg.cont.wb - contBorders.l - contBorders.r; |
|
258 elm.dragCfg.cont.h = elm.dragCfg.cont.hb - contBorders.t - contBorders.b; |
|
259 } else if (elm.dragCfg.containment == 'document') { |
|
260 var clnt = jQuery.iUtil.getClient(); |
|
261 elm.dragCfg.cont = { |
|
262 x : 0, |
|
263 y : 0, |
|
264 w : clnt.w, |
|
265 h : clnt.h |
|
266 }; |
|
267 } |
|
268 } else if (elm.dragCfg.containment.constructor == Array) { |
|
269 elm.dragCfg.cont = { |
|
270 x : parseInt(elm.dragCfg.containment[0])||0, |
|
271 y : parseInt(elm.dragCfg.containment[1])||0, |
|
272 w : parseInt(elm.dragCfg.containment[2])||0, |
|
273 h : parseInt(elm.dragCfg.containment[3])||0 |
|
274 }; |
|
275 } |
|
276 elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oC.x; |
|
277 elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oC.y; |
|
278 }, |
|
279 |
|
280 hidehelper : function(dragged) |
|
281 { |
|
282 if (dragged.dragCfg.insideParent || dragged.dragCfg.containment == 'parent') { |
|
283 jQuery('body', document).append(jQuery.iDrag.helper.get(0)); |
|
284 } |
|
285 jQuery.iDrag.helper.empty().hide().css('opacity', 1); |
|
286 if (window.ActiveXObject) { |
|
287 jQuery.iDrag.helper.css('filter', 'alpha(opacity=100)'); |
|
288 } |
|
289 }, |
|
290 |
|
291 dragstop : function(e) |
|
292 { |
|
293 |
|
294 jQuery(document) |
|
295 .unbind('mousemove', jQuery.iDrag.dragmove) |
|
296 .unbind('mouseup', jQuery.iDrag.dragstop); |
|
297 |
|
298 if (jQuery.iDrag.dragged == null) { |
|
299 return; |
|
300 } |
|
301 var dragged = jQuery.iDrag.dragged; |
|
302 |
|
303 jQuery.iDrag.dragged = null; |
|
304 |
|
305 if (dragged.dragCfg.init == false) { |
|
306 return false; |
|
307 } |
|
308 if (dragged.dragCfg.so == true) { |
|
309 jQuery(dragged).css('position', dragged.dragCfg.oP); |
|
310 } |
|
311 var dEs = dragged.style; |
|
312 |
|
313 if (dragged.si) { |
|
314 jQuery.iDrag.helper.css('cursor', 'move'); |
|
315 } |
|
316 if(dragged.dragCfg.frameClass) { |
|
317 jQuery.iDrag.helper.removeClass(dragged.dragCfg.frameClass); |
|
318 } |
|
319 |
|
320 if (dragged.dragCfg.revert == false) { |
|
321 if (dragged.dragCfg.fx > 0) { |
|
322 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') { |
|
323 var x = new jQuery.fx(dragged,{duration:dragged.dragCfg.fx}, 'left'); |
|
324 x.custom(dragged.dragCfg.oR.x,dragged.dragCfg.nRx); |
|
325 } |
|
326 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') { |
|
327 var y = new jQuery.fx(dragged,{duration:dragged.dragCfg.fx}, 'top'); |
|
328 y.custom(dragged.dragCfg.oR.y,dragged.dragCfg.nRy); |
|
329 } |
|
330 } else { |
|
331 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') |
|
332 dragged.style.left = dragged.dragCfg.nRx + 'px'; |
|
333 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') |
|
334 dragged.style.top = dragged.dragCfg.nRy + 'px'; |
|
335 } |
|
336 jQuery.iDrag.hidehelper(dragged); |
|
337 if (dragged.dragCfg.ghosting == false) { |
|
338 jQuery(dragged).css('display', dragged.dragCfg.oD); |
|
339 } |
|
340 } else if (dragged.dragCfg.fx > 0) { |
|
341 dragged.dragCfg.prot = true; |
|
342 var dh = false; |
|
343 if(jQuery.iDrop && jQuery.iSort && dragged.dragCfg.so) { |
|
344 dh = jQuery.iUtil.getPosition(jQuery.iSort.helper.get(0)); |
|
345 } |
|
346 jQuery.iDrag.helper.animate( |
|
347 { |
|
348 left : dh ? dh.x : dragged.dragCfg.oC.x, |
|
349 top : dh ? dh.y : dragged.dragCfg.oC.y |
|
350 }, |
|
351 dragged.dragCfg.fx, |
|
352 function() |
|
353 { |
|
354 dragged.dragCfg.prot = false; |
|
355 if (dragged.dragCfg.ghosting == false) { |
|
356 dragged.style.display = dragged.dragCfg.oD; |
|
357 } |
|
358 jQuery.iDrag.hidehelper(dragged); |
|
359 } |
|
360 ); |
|
361 } else { |
|
362 jQuery.iDrag.hidehelper(dragged); |
|
363 if (dragged.dragCfg.ghosting == false) { |
|
364 jQuery(dragged).css('display', dragged.dragCfg.oD); |
|
365 } |
|
366 } |
|
367 |
|
368 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){ |
|
369 jQuery.iDrop.checkdrop(dragged); |
|
370 } |
|
371 if (jQuery.iSort && dragged.dragCfg.so) { |
|
372 jQuery.iSort.check(dragged); |
|
373 } |
|
374 if (dragged.dragCfg.onChange && (dragged.dragCfg.nRx != dragged.dragCfg.oR.x || dragged.dragCfg.nRy != dragged.dragCfg.oR.y)){ |
|
375 dragged.dragCfg.onChange.apply(dragged, dragged.dragCfg.lastSi||[0,0,dragged.dragCfg.nRx,dragged.dragCfg.nRy]); |
|
376 } |
|
377 if (dragged.dragCfg.onStop) |
|
378 dragged.dragCfg.onStop.apply(dragged); |
|
379 return false; |
|
380 }, |
|
381 |
|
382 snapToGrid : function(x, y, dx, dy) |
|
383 { |
|
384 if (dx != 0) |
|
385 dx = parseInt((dx + (this.dragCfg.gx * dx/Math.abs(dx))/2)/this.dragCfg.gx) * this.dragCfg.gx; |
|
386 if (dy != 0) |
|
387 dy = parseInt((dy + (this.dragCfg.gy * dy/Math.abs(dy))/2)/this.dragCfg.gy) * this.dragCfg.gy; |
|
388 return { |
|
389 dx : dx, |
|
390 dy : dy, |
|
391 x: 0, |
|
392 y: 0 |
|
393 }; |
|
394 }, |
|
395 |
|
396 fitToContainer : function(x, y, dx, dy) |
|
397 { |
|
398 dx = Math.min( |
|
399 Math.max(dx,this.dragCfg.cont.dx), |
|
400 this.dragCfg.cont.w + this.dragCfg.cont.dx - this.dragCfg.oC.wb |
|
401 ); |
|
402 dy = Math.min( |
|
403 Math.max(dy,this.dragCfg.cont.dy), |
|
404 this.dragCfg.cont.h + this.dragCfg.cont.dy - this.dragCfg.oC.hb |
|
405 ); |
|
406 |
|
407 return { |
|
408 dx : dx, |
|
409 dy : dy, |
|
410 x: 0, |
|
411 y: 0 |
|
412 } |
|
413 }, |
|
414 |
|
415 dragmove : function(e) |
|
416 { |
|
417 if (jQuery.iDrag.dragged == null || jQuery.iDrag.dragged.dragCfg.prot == true) { |
|
418 return; |
|
419 } |
|
420 |
|
421 var dragged = jQuery.iDrag.dragged; |
|
422 |
|
423 dragged.dragCfg.currentPointer = jQuery.iUtil.getPointer(e); |
|
424 if (dragged.dragCfg.init == false) { |
|
425 distance = Math.sqrt(Math.pow(dragged.dragCfg.pointer.x - dragged.dragCfg.currentPointer.x, 2) + Math.pow(dragged.dragCfg.pointer.y - dragged.dragCfg.currentPointer.y, 2)); |
|
426 if (distance < dragged.dragCfg.snapDistance){ |
|
427 return; |
|
428 } else { |
|
429 jQuery.iDrag.dragstart(e); |
|
430 } |
|
431 } |
|
432 |
|
433 var dx = dragged.dragCfg.currentPointer.x - dragged.dragCfg.pointer.x; |
|
434 var dy = dragged.dragCfg.currentPointer.y - dragged.dragCfg.pointer.y; |
|
435 |
|
436 for (var i in dragged.dragCfg.onDragModifier) { |
|
437 var newCoords = dragged.dragCfg.onDragModifier[i].apply(dragged, [dragged.dragCfg.oR.x + dx, dragged.dragCfg.oR.y + dy, dx, dy]); |
|
438 if (newCoords && newCoords.constructor == Object) { |
|
439 dx = i != 'user' ? newCoords.dx : (newCoords.x - dragged.dragCfg.oR.x); |
|
440 dy = i != 'user' ? newCoords.dy : (newCoords.y - dragged.dragCfg.oR.y); |
|
441 } |
|
442 } |
|
443 |
|
444 dragged.dragCfg.nx = dragged.dragCfg.oC.x + dx - dragged.dragCfg.diffX; |
|
445 dragged.dragCfg.ny = dragged.dragCfg.oC.y + dy - dragged.dragCfg.diffY; |
|
446 |
|
447 if (dragged.dragCfg.si && (dragged.dragCfg.onSlide || dragged.dragCfg.onChange)) { |
|
448 jQuery.iSlider.onSlide(dragged, dragged.dragCfg.nx, dragged.dragCfg.ny); |
|
449 } |
|
450 |
|
451 if(dragged.dragCfg.onDrag) |
|
452 dragged.dragCfg.onDrag.apply(dragged, [dragged.dragCfg.oR.x + dx, dragged.dragCfg.oR.y + dy]); |
|
453 |
|
454 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'horizontally') { |
|
455 dragged.dragCfg.nRx = dragged.dragCfg.oR.x + dx; |
|
456 jQuery.iDrag.helper.get(0).style.left = dragged.dragCfg.nx + 'px'; |
|
457 } |
|
458 if (!dragged.dragCfg.axis || dragged.dragCfg.axis == 'vertically') { |
|
459 dragged.dragCfg.nRy = dragged.dragCfg.oR.y + dy; |
|
460 jQuery.iDrag.helper.get(0).style.top = dragged.dragCfg.ny + 'px'; |
|
461 } |
|
462 |
|
463 if (jQuery.iDrop && jQuery.iDrop.count > 0 ){ |
|
464 jQuery.iDrop.checkhover(dragged); |
|
465 } |
|
466 return false; |
|
467 }, |
|
468 |
|
469 build : function(o) |
|
470 { |
|
471 if (!jQuery.iDrag.helper) { |
|
472 jQuery('body',document).append('<div id="dragHelper"></div>'); |
|
473 jQuery.iDrag.helper = jQuery('#dragHelper'); |
|
474 var el = jQuery.iDrag.helper.get(0); |
|
475 var els = el.style; |
|
476 els.position = 'absolute'; |
|
477 els.display = 'none'; |
|
478 els.cursor = 'move'; |
|
479 els.listStyle = 'none'; |
|
480 els.overflow = 'hidden'; |
|
481 if (window.ActiveXObject) { |
|
482 el.unselectable = "on"; |
|
483 } else { |
|
484 els.mozUserSelect = 'none'; |
|
485 els.userSelect = 'none'; |
|
486 els.KhtmlUserSelect = 'none'; |
|
487 } |
|
488 } |
|
489 if (!o) { |
|
490 o = {}; |
|
491 } |
|
492 return this.each( |
|
493 function() |
|
494 { |
|
495 if (this.isDraggable || !jQuery.iUtil) |
|
496 return; |
|
497 if (window.ActiveXObject) { |
|
498 this.onselectstart = function(){return false;}; |
|
499 this.ondragstart = function(){return false;}; |
|
500 } |
|
501 var el = this; |
|
502 var dhe = o.handle ? jQuery(this).find(o.handle) : jQuery(this); |
|
503 if(jQuery.browser.msie) { |
|
504 dhe.each( |
|
505 function() |
|
506 { |
|
507 this.unselectable = "on"; |
|
508 } |
|
509 ); |
|
510 } else { |
|
511 dhe.css('-moz-user-select', 'none'); |
|
512 dhe.css('user-select', 'none'); |
|
513 dhe.css('-khtml-user-select', 'none'); |
|
514 } |
|
515 this.dragCfg = { |
|
516 dhe: dhe, |
|
517 revert : o.revert ? true : false, |
|
518 ghosting : o.ghosting ? true : false, |
|
519 so : o.so ? o.so : false, |
|
520 si : o.si ? o.si : false, |
|
521 insideParent : o.insideParent ? o.insideParent : false, |
|
522 zIndex : o.zIndex ? parseInt(o.zIndex)||0 : false, |
|
523 opacity : o.opacity ? parseFloat(o.opacity) : false, |
|
524 fx : parseInt(o.fx)||null, |
|
525 hpc : o.hpc ? o.hpc : false, |
|
526 onDragModifier : {}, |
|
527 pointer : {}, |
|
528 onStart : o.onStart && o.onStart.constructor == Function ? o.onStart : false, |
|
529 onStop : o.onStop && o.onStop.constructor == Function ? o.onStop : false, |
|
530 onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : false, |
|
531 axis : /vertically|horizontally/.test(o.axis) ? o.axis : false, |
|
532 snapDistance : o.snapDistance ? parseInt(o.snapDistance)||0 : 0, |
|
533 cursorAt: o.cursorAt ? o.cursorAt : false, |
|
534 autoSize : o.autoSize ? true : false, |
|
535 frameClass : o.frameClass || false |
|
536 |
|
537 }; |
|
538 if (o.onDragModifier && o.onDragModifier.constructor == Function) |
|
539 this.dragCfg.onDragModifier.user = o.onDragModifier; |
|
540 if (o.onDrag && o.onDrag.constructor == Function) |
|
541 this.dragCfg.onDrag = o.onDrag; |
|
542 if (o.containment && ((o.containment.constructor == String && (o.containment == 'parent' || o.containment == 'document')) || (o.containment.constructor == Array && o.containment.length == 4) )) { |
|
543 this.dragCfg.containment = o.containment; |
|
544 } |
|
545 if(o.fractions) { |
|
546 this.dragCfg.fractions = o.fractions; |
|
547 } |
|
548 if(o.grid){ |
|
549 if(typeof o.grid == 'number'){ |
|
550 this.dragCfg.gx = parseInt(o.grid)||1; |
|
551 this.dragCfg.gy = parseInt(o.grid)||1; |
|
552 } else if (o.grid.length == 2) { |
|
553 this.dragCfg.gx = parseInt(o.grid[0])||1; |
|
554 this.dragCfg.gy = parseInt(o.grid[1])||1; |
|
555 } |
|
556 } |
|
557 if (o.onSlide && o.onSlide.constructor == Function) { |
|
558 this.dragCfg.onSlide = o.onSlide; |
|
559 } |
|
560 |
|
561 this.isDraggable = true; |
|
562 dhe.each( |
|
563 function(){ |
|
564 this.dragElem = el; |
|
565 } |
|
566 ); |
|
567 dhe.bind('mousedown', jQuery.iDrag.draginit); |
|
568 } |
|
569 ) |
|
570 } |
|
571 }; |
|
572 |
|
573 /** |
|
574 * Destroy an existing draggable on a collection of elements |
|
575 * |
|
576 * @name DraggableDestroy |
|
577 * @descr Destroy a draggable |
|
578 * @type jQuery |
|
579 * @cat Plugins/Interface |
|
580 * @example $('#drag2').DraggableDestroy(); |
|
581 */ |
|
582 |
|
583 jQuery.fn.extend( |
|
584 { |
|
585 DraggableDestroy : jQuery.iDrag.destroy, |
|
586 Draggable : jQuery.iDrag.build |
|
587 } |
|
588 ); |
|