]>
git.wh0rd.org - tt-rss.git/blob - scriptaculous/dragdrop.js
1 // script.aculo.us dragdrop.js v1.7.0, Fri Jan 19 19:16:36 CET 2007
3 // Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
4 // (c) 2005, 2006 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
6 // script.aculo.us is freely distributable under the terms of an MIT-style license.
7 // For details, see the script.aculo.us web site: http://script.aculo.us/
9 if(typeof Effect
== 'undefined')
10 throw("dragdrop.js requires including script.aculo.us' effects.js library");
15 remove: function(element
) {
16 this.drops
= this.drops
.reject(function(d
) { return d
.element
==$(element
) });
19 add: function(element
) {
21 var options
= Object
.extend({
25 }, arguments
[1] || {});
28 if(options
.containment
) {
29 options
._containers
= [];
30 var containment
= options
.containment
;
31 if((typeof containment
== 'object') &&
32 (containment
.constructor == Array
)) {
33 containment
.each( function(c
) { options
._containers
.push($(c
)) });
35 options
._containers
.push($(containment
));
39 if(options
.accept
) options
.accept
= [options
.accept
].flatten();
41 Element
.makePositioned(element
); // fix IE
42 options
.element
= element
;
44 this.drops
.push(options
);
47 findDeepestChild: function(drops
) {
50 for (i
= 1; i
< drops
.length
; ++i
)
51 if (Element
.isParent(drops
[i
].element
, deepest
.element
))
57 isContained: function(element
, drop
) {
60 containmentNode
= element
.treeNode
;
62 containmentNode
= element
.parentNode
;
64 return drop
._containers
.detect(function(c
) { return containmentNode
== c
});
67 isAffected: function(point
, element
, drop
) {
69 (drop
.element
!=element
) &&
70 ((!drop
._containers
) ||
71 this.isContained(element
, drop
)) &&
73 (Element
.classNames(element
).detect(
74 function(v
) { return drop
.accept
.include(v
) } ) )) &&
75 Position
.within(drop
.element
, point
[0], point
[1]) );
78 deactivate: function(drop
) {
80 Element
.removeClassName(drop
.element
, drop
.hoverclass
);
81 this.last_active
= null;
84 activate: function(drop
) {
86 Element
.addClassName(drop
.element
, drop
.hoverclass
);
87 this.last_active
= drop
;
90 show: function(point
, element
) {
91 if(!this.drops
.length
) return;
94 if(this.last_active
) this.deactivate(this.last_active
);
95 this.drops
.each( function(drop
) {
96 if(Droppables
.isAffected(point
, element
, drop
))
100 if(affected
.length
>0) {
101 drop
= Droppables
.findDeepestChild(affected
);
102 Position
.within(drop
.element
, point
[0], point
[1]);
104 drop
.onHover(element
, drop
.element
, Position
.overlap(drop
.overlap
, drop
.element
));
106 Droppables
.activate(drop
);
110 fire: function(event
, element
) {
111 if(!this.last_active
) return;
114 if (this.isAffected([Event
.pointerX(event
), Event
.pointerY(event
)], element
, this.last_active
))
115 if (this.last_active
.onDrop
)
116 this.last_active
.onDrop(element
, this.last_active
.element
, event
);
121 this.deactivate(this.last_active
);
129 register: function(draggable
) {
130 if(this.drags
.length
== 0) {
131 this.eventMouseUp
= this.endDrag
.bindAsEventListener(this);
132 this.eventMouseMove
= this.updateDrag
.bindAsEventListener(this);
133 this.eventKeypress
= this.keyPress
.bindAsEventListener(this);
135 Event
.observe(document
, "mouseup", this.eventMouseUp
);
136 Event
.observe(document
, "mousemove", this.eventMouseMove
);
137 Event
.observe(document
, "keypress", this.eventKeypress
);
139 this.drags
.push(draggable
);
142 unregister: function(draggable
) {
143 this.drags
= this.drags
.reject(function(d
) { return d
==draggable
});
144 if(this.drags
.length
== 0) {
145 Event
.stopObserving(document
, "mouseup", this.eventMouseUp
);
146 Event
.stopObserving(document
, "mousemove", this.eventMouseMove
);
147 Event
.stopObserving(document
, "keypress", this.eventKeypress
);
151 activate: function(draggable
) {
152 if(draggable
.options
.delay
) {
153 this._timeout
= setTimeout(function() {
154 Draggables
._timeout
= null;
156 Draggables
.activeDraggable
= draggable
;
157 }.bind(this), draggable
.options
.delay
);
159 window
.focus(); // allows keypress events if window isn't currently focused, fails for Safari
160 this.activeDraggable
= draggable
;
164 deactivate: function() {
165 this.activeDraggable
= null;
168 updateDrag: function(event
) {
169 if(!this.activeDraggable
) return;
170 var pointer
= [Event
.pointerX(event
), Event
.pointerY(event
)];
171 // Mozilla-based browsers fire successive mousemove events with
172 // the same coordinates, prevent needless redrawing (moz bug?)
173 if(this._lastPointer
&& (this._lastPointer
.inspect() == pointer
.inspect())) return;
174 this._lastPointer
= pointer
;
176 this.activeDraggable
.updateDrag(event
, pointer
);
179 endDrag: function(event
) {
181 clearTimeout(this._timeout
);
182 this._timeout
= null;
184 if(!this.activeDraggable
) return;
185 this._lastPointer
= null;
186 this.activeDraggable
.endDrag(event
);
187 this.activeDraggable
= null;
190 keyPress: function(event
) {
191 if(this.activeDraggable
)
192 this.activeDraggable
.keyPress(event
);
195 addObserver: function(observer
) {
196 this.observers
.push(observer
);
197 this._cacheObserverCallbacks();
200 removeObserver: function(element
) { // element instead of observer fixes mem leaks
201 this.observers
= this.observers
.reject( function(o
) { return o
.element
==element
});
202 this._cacheObserverCallbacks();
205 notify: function(eventName
, draggable
, event
) { // 'onStart', 'onEnd', 'onDrag'
206 if(this[eventName
+'Count'] > 0)
207 this.observers
.each( function(o
) {
208 if(o
[eventName
]) o
[eventName
](eventName
, draggable
, event
);
210 if(draggable
.options
[eventName
]) draggable
.options
[eventName
](draggable
, event
);
213 _cacheObserverCallbacks: function() {
214 ['onStart','onEnd','onDrag'].each( function(eventName
) {
215 Draggables
[eventName
+'Count'] = Draggables
.observers
.select(
216 function(o
) { return o
[eventName
]; }
222 /*--------------------------------------------------------------------------*/
224 var Draggable
= Class
.create();
225 Draggable
._dragging
= {};
227 Draggable
.prototype = {
228 initialize: function(element
) {
231 reverteffect: function(element
, top_offset
, left_offset
) {
232 var dur
= Math
.sqrt(Math
.abs(top_offset
^2)+Math
.abs(left_offset
^2))*0.02;
233 new Effect
.Move(element
, { x
: -left_offset
, y
: -top_offset
, duration
: dur
,
234 queue
: {scope
:'_draggable', position
:'end'}
237 endeffect: function(element
) {
238 var toOpacity
= typeof element
._opacity
== 'number' ? element
._opacity
: 1.0;
239 new Effect
.Opacity(element
, {duration
:0.2, from:0.7, to
:toOpacity
,
240 queue
: {scope
:'_draggable', position
:'end'},
241 afterFinish: function(){
242 Draggable
._dragging
[element
] = false
249 scrollSensitivity
: 20,
251 snap
: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
255 if(!arguments
[1] || typeof arguments
[1].endeffect
== 'undefined')
256 Object
.extend(defaults
, {
257 starteffect: function(element
) {
258 element
._opacity
= Element
.getOpacity(element
);
259 Draggable
._dragging
[element
] = true;
260 new Effect
.Opacity(element
, {duration
:0.2, from:element
._opacity
, to
:0.7});
264 var options
= Object
.extend(defaults
, arguments
[1] || {});
266 this.element
= $(element
);
268 if(options
.handle
&& (typeof options
.handle
== 'string'))
269 this.handle
= this.element
.down('.'+options
.handle
, 0);
271 if(!this.handle
) this.handle
= $(options
.handle
);
272 if(!this.handle
) this.handle
= this.element
;
274 if(options
.scroll
&& !options
.scroll
.scrollTo
&& !options
.scroll
.outerHTML
) {
275 options
.scroll
= $(options
.scroll
);
276 this._isScrollChild
= Element
.childOf(this.element
, options
.scroll
);
279 Element
.makePositioned(this.element
); // fix IE
281 this.delta
= this.currentDelta();
282 this.options
= options
;
283 this.dragging
= false;
285 this.eventMouseDown
= this.initDrag
.bindAsEventListener(this);
286 Event
.observe(this.handle
, "mousedown", this.eventMouseDown
);
288 Draggables
.register(this);
291 destroy: function() {
292 Event
.stopObserving(this.handle
, "mousedown", this.eventMouseDown
);
293 Draggables
.unregister(this);
296 currentDelta: function() {
298 parseInt(Element
.getStyle(this.element
,'left') || '0'),
299 parseInt(Element
.getStyle(this.element
,'top') || '0')]);
302 initDrag: function(event
) {
303 if(typeof Draggable
._dragging
[this.element
] != 'undefined' &&
304 Draggable
._dragging
[this.element
]) return;
305 if(Event
.isLeftClick(event
)) {
306 // abort on form elements, fixes a Firefox issue
307 var src
= Event
.element(event
);
308 if((tag_name
= src
.tagName
.toUpperCase()) && (
310 tag_name
=='SELECT' ||
311 tag_name
=='OPTION' ||
312 tag_name
=='BUTTON' ||
313 tag_name
=='TEXTAREA')) return;
315 var pointer
= [Event
.pointerX(event
), Event
.pointerY(event
)];
316 var pos
= Position
.cumulativeOffset(this.element
);
317 this.offset
= [0,1].map( function(i
) { return (pointer
[i
] - pos
[i
]) });
319 Draggables
.activate(this);
324 startDrag: function(event
) {
325 this.dragging
= true;
327 if(this.options
.zindex
) {
328 this.originalZ
= parseInt(Element
.getStyle(this.element
,'z-index') || 0);
329 this.element
.style
.zIndex
= this.options
.zindex
;
332 if(this.options
.ghosting
) {
333 this._clone
= this.element
.cloneNode(true);
334 Position
.absolutize(this.element
);
335 this.element
.parentNode
.insertBefore(this._clone
, this.element
);
338 if(this.options
.scroll
) {
339 if (this.options
.scroll
== window
) {
340 var where
= this._getWindowScroll(this.options
.scroll
);
341 this.originalScrollLeft
= where
.left
;
342 this.originalScrollTop
= where
.top
;
344 this.originalScrollLeft
= this.options
.scroll
.scrollLeft
;
345 this.originalScrollTop
= this.options
.scroll
.scrollTop
;
349 Draggables
.notify('onStart', this, event
);
351 if(this.options
.starteffect
) this.options
.starteffect(this.element
);
354 updateDrag: function(event
, pointer
) {
355 if(!this.dragging
) this.startDrag(event
);
357 Droppables
.show(pointer
, this.element
);
358 Draggables
.notify('onDrag', this, event
);
361 if(this.options
.change
) this.options
.change(this);
363 if(this.options
.scroll
) {
364 this.stopScrolling();
367 if (this.options
.scroll
== window
) {
368 with(this._getWindowScroll(this.options
.scroll
)) { p
= [ left
, top
, left
+width
, top
+height
]; }
370 p
= Position
.page(this.options
.scroll
);
371 p
[0] += this.options
.scroll
.scrollLeft
+ Position
.deltaX
;
372 p
[1] += this.options
.scroll
.scrollTop
+ Position
.deltaY
;
373 p
.push(p
[0]+this.options
.scroll
.offsetWidth
);
374 p
.push(p
[1]+this.options
.scroll
.offsetHeight
);
377 if(pointer
[0] < (p
[0]+this.options
.scrollSensitivity
)) speed
[0] = pointer
[0]-(p
[0]+this.options
.scrollSensitivity
);
378 if(pointer
[1] < (p
[1]+this.options
.scrollSensitivity
)) speed
[1] = pointer
[1]-(p
[1]+this.options
.scrollSensitivity
);
379 if(pointer
[0] > (p
[2]-this.options
.scrollSensitivity
)) speed
[0] = pointer
[0]-(p
[2]-this.options
.scrollSensitivity
);
380 if(pointer
[1] > (p
[3]-this.options
.scrollSensitivity
)) speed
[1] = pointer
[1]-(p
[3]-this.options
.scrollSensitivity
);
381 this.startScrolling(speed
);
384 // fix AppleWebKit rendering
385 if(navigator
.appVersion
.indexOf('AppleWebKit')>0) window
.scrollBy(0,0);
390 finishDrag: function(event
, success
) {
391 this.dragging
= false;
393 if(this.options
.ghosting
) {
394 Position
.relativize(this.element
);
395 Element
.remove(this._clone
);
399 if(success
) Droppables
.fire(event
, this.element
);
400 Draggables
.notify('onEnd', this, event
);
402 var revert
= this.options
.revert
;
403 if(revert
&& typeof revert
== 'function') revert
= revert(this.element
);
405 var d
= this.currentDelta();
406 if(revert
&& this.options
.reverteffect
) {
407 this.options
.reverteffect(this.element
,
408 d
[1]-this.delta
[1], d
[0]-this.delta
[0]);
413 if(this.options
.zindex
)
414 this.element
.style
.zIndex
= this.originalZ
;
416 if(this.options
.endeffect
)
417 this.options
.endeffect(this.element
);
419 Draggables
.deactivate(this);
423 keyPress: function(event
) {
424 if(event
.keyCode
!=Event
.KEY_ESC
) return;
425 this.finishDrag(event
, false);
429 endDrag: function(event
) {
430 if(!this.dragging
) return;
431 this.stopScrolling();
432 this.finishDrag(event
, true);
436 draw: function(point
) {
437 var pos
= Position
.cumulativeOffset(this.element
);
438 if(this.options
.ghosting
) {
439 var r
= Position
.realOffset(this.element
);
440 pos
[0] += r
[0] - Position
.deltaX
; pos
[1] += r
[1] - Position
.deltaY
;
443 var d
= this.currentDelta();
444 pos
[0] -= d
[0]; pos
[1] -= d
[1];
446 if(this.options
.scroll
&& (this.options
.scroll
!= window
&& this._isScrollChild
)) {
447 pos
[0] -= this.options
.scroll
.scrollLeft
-this.originalScrollLeft
;
448 pos
[1] -= this.options
.scroll
.scrollTop
-this.originalScrollTop
;
451 var p
= [0,1].map(function(i
){
452 return (point
[i
]-pos
[i
]-this.offset
[i
])
455 if(this.options
.snap
) {
456 if(typeof this.options
.snap
== 'function') {
457 p
= this.options
.snap(p
[0],p
[1],this);
459 if(this.options
.snap
instanceof Array
) {
460 p
= p
.map( function(v
, i
) {
461 return Math
.round(v
/this.options
.snap
[i
])*this.options
.snap
[i
] }.bind(this))
463 p
= p
.map( function(v
) {
464 return Math
.round(v
/this.options
.snap
)*this.options
.snap
}.bind(this))
468 var style
= this.element
.style
;
469 if((!this.options
.constraint
) || (this.options
.constraint
=='horizontal'))
470 style
.left
= p
[0] + "px";
471 if((!this.options
.constraint
) || (this.options
.constraint
=='vertical'))
472 style
.top
= p
[1] + "px";
474 if(style
.visibility
=="hidden") style
.visibility
= ""; // fix gecko rendering
477 stopScrolling: function() {
478 if(this.scrollInterval
) {
479 clearInterval(this.scrollInterval
);
480 this.scrollInterval
= null;
481 Draggables
._lastScrollPointer
= null;
485 startScrolling: function(speed
) {
486 if(!(speed
[0] || speed
[1])) return;
487 this.scrollSpeed
= [speed
[0]*this.options
.scrollSpeed
,speed
[1]*this.options
.scrollSpeed
];
488 this.lastScrolled
= new Date();
489 this.scrollInterval
= setInterval(this.scroll
.bind(this), 10);
493 var current
= new Date();
494 var delta
= current
- this.lastScrolled
;
495 this.lastScrolled
= current
;
496 if(this.options
.scroll
== window
) {
497 with (this._getWindowScroll(this.options
.scroll
)) {
498 if (this.scrollSpeed
[0] || this.scrollSpeed
[1]) {
499 var d
= delta
/ 1000;
500 this.options
.scroll
.scrollTo( left
+ d
*this.scrollSpeed
[0], top
+ d
*this.scrollSpeed
[1] );
504 this.options
.scroll
.scrollLeft
+= this.scrollSpeed
[0] * delta
/ 1000;
505 this.options
.scroll
.scrollTop
+= this.scrollSpeed
[1] * delta
/ 1000;
509 Droppables
.show(Draggables
._lastPointer
, this.element
);
510 Draggables
.notify('onDrag', this);
511 if (this._isScrollChild
) {
512 Draggables
._lastScrollPointer
= Draggables
._lastScrollPointer
|| $A(Draggables
._lastPointer
);
513 Draggables
._lastScrollPointer
[0] += this.scrollSpeed
[0] * delta
/ 1000;
514 Draggables
._lastScrollPointer
[1] += this.scrollSpeed
[1] * delta
/ 1000;
515 if (Draggables
._lastScrollPointer
[0] < 0)
516 Draggables
._lastScrollPointer
[0] = 0;
517 if (Draggables
._lastScrollPointer
[1] < 0)
518 Draggables
._lastScrollPointer
[1] = 0;
519 this.draw(Draggables
._lastScrollPointer
);
522 if(this.options
.change
) this.options
.change(this);
525 _getWindowScroll: function(w
) {
528 if (w
.document
.documentElement
&& documentElement
.scrollTop
) {
529 T
= documentElement
.scrollTop
;
530 L
= documentElement
.scrollLeft
;
531 } else if (w
.document
.body
) {
538 } else if (w
.document
.documentElement
&& documentElement
.clientWidth
) {
539 W
= documentElement
.clientWidth
;
540 H
= documentElement
.clientHeight
;
542 W
= body
.offsetWidth
;
543 H
= body
.offsetHeight
546 return { top
: T
, left
: L
, width
: W
, height
: H
};
550 /*--------------------------------------------------------------------------*/
552 var SortableObserver
= Class
.create();
553 SortableObserver
.prototype = {
554 initialize: function(element
, observer
) {
555 this.element
= $(element
);
556 this.observer
= observer
;
557 this.lastValue
= Sortable
.serialize(this.element
);
560 onStart: function() {
561 this.lastValue
= Sortable
.serialize(this.element
);
566 if(this.lastValue
!= Sortable
.serialize(this.element
))
567 this.observer(this.element
)
572 SERIALIZE_RULE
: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
576 _findRootElement: function(element
) {
577 while (element
.tagName
.toUpperCase() != "BODY") {
578 if(element
.id
&& Sortable
.sortables
[element
.id
]) return element
;
579 element
= element
.parentNode
;
583 options: function(element
) {
584 element
= Sortable
._findRootElement($(element
));
586 return Sortable
.sortables
[element
.id
];
589 destroy: function(element
){
590 var s
= Sortable
.options(element
);
593 Draggables
.removeObserver(s
.element
);
594 s
.droppables
.each(function(d
){ Droppables
.remove(d
) });
595 s
.draggables
.invoke('destroy');
597 delete Sortable
.sortables
[s
.element
.id
];
601 create: function(element
) {
602 element
= $(element
);
603 var options
= Object
.extend({
605 tag
: 'li', // assumes li children, override with tag: 'tagname'
609 overlap
: 'vertical', // one of 'vertical', 'horizontal'
610 constraint
: 'vertical', // one of 'vertical', 'horizontal', false
611 containment
: element
, // also takes array of elements (or id's); or false
612 handle
: false, // or a CSS class
618 scrollSensitivity
: 20,
620 format
: this.SERIALIZE_RULE
,
621 onChange
: Prototype
.emptyFunction
,
622 onUpdate
: Prototype
.emptyFunction
623 }, arguments
[1] || {});
625 // clear any old sortable with same element
626 this.destroy(element
);
628 // build options for the draggables
629 var options_for_draggable
= {
631 scroll
: options
.scroll
,
632 scrollSpeed
: options
.scrollSpeed
,
633 scrollSensitivity
: options
.scrollSensitivity
,
634 delay
: options
.delay
,
635 ghosting
: options
.ghosting
,
636 constraint
: options
.constraint
,
637 handle
: options
.handle
};
639 if(options
.starteffect
)
640 options_for_draggable
.starteffect
= options
.starteffect
;
642 if(options
.reverteffect
)
643 options_for_draggable
.reverteffect
= options
.reverteffect
;
645 if(options
.ghosting
) options_for_draggable
.reverteffect = function(element
) {
646 element
.style
.top
= 0;
647 element
.style
.left
= 0;
650 if(options
.endeffect
)
651 options_for_draggable
.endeffect
= options
.endeffect
;
654 options_for_draggable
.zindex
= options
.zindex
;
656 // build options for the droppables
657 var options_for_droppable
= {
658 overlap
: options
.overlap
,
659 containment
: options
.containment
,
661 hoverclass
: options
.hoverclass
,
662 onHover
: Sortable
.onHover
665 var options_for_tree
= {
666 onHover
: Sortable
.onEmptyHover
,
667 overlap
: options
.overlap
,
668 containment
: options
.containment
,
669 hoverclass
: options
.hoverclass
672 // fix for gecko engine
673 Element
.cleanWhitespace(element
);
675 options
.draggables
= [];
676 options
.droppables
= [];
678 // drop on empty handling
679 if(options
.dropOnEmpty
|| options
.tree
) {
680 Droppables
.add(element
, options_for_tree
);
681 options
.droppables
.push(element
);
684 (this.findElements(element
, options
) || []).each( function(e
) {
685 // handles are per-draggable
686 var handle
= options
.handle
?
687 $(e
).down('.'+options
.handle
,0) : e
;
688 options
.draggables
.push(
689 new Draggable(e
, Object
.extend(options_for_draggable
, { handle
: handle
})));
690 Droppables
.add(e
, options_for_droppable
);
691 if(options
.tree
) e
.treeNode
= element
;
692 options
.droppables
.push(e
);
696 (Sortable
.findTreeElements(element
, options
) || []).each( function(e
) {
697 Droppables
.add(e
, options_for_tree
);
698 e
.treeNode
= element
;
699 options
.droppables
.push(e
);
704 this.sortables
[element
.id
] = options
;
707 Draggables
.addObserver(new SortableObserver(element
, options
.onUpdate
));
711 // return all suitable-for-sortable elements in a guaranteed order
712 findElements: function(element
, options
) {
713 return Element
.findChildren(
714 element
, options
.only
, options
.tree
? true : false, options
.tag
);
717 findTreeElements: function(element
, options
) {
718 return Element
.findChildren(
719 element
, options
.only
, options
.tree
? true : false, options
.treeTag
);
722 onHover: function(element
, dropon
, overlap
) {
723 if(Element
.isParent(dropon
, element
)) return;
725 if(overlap
> .33 && overlap
< .66 && Sortable
.options(dropon
).tree
) {
727 } else if(overlap
>0.5) {
728 Sortable
.mark(dropon
, 'before');
729 if(dropon
.previousSibling
!= element
) {
730 var oldParentNode
= element
.parentNode
;
731 element
.style
.visibility
= "hidden"; // fix gecko rendering
732 dropon
.parentNode
.insertBefore(element
, dropon
);
733 if(dropon
.parentNode
!=oldParentNode
)
734 Sortable
.options(oldParentNode
).onChange(element
);
735 Sortable
.options(dropon
.parentNode
).onChange(element
);
738 Sortable
.mark(dropon
, 'after');
739 var nextElement
= dropon
.nextSibling
|| null;
740 if(nextElement
!= element
) {
741 var oldParentNode
= element
.parentNode
;
742 element
.style
.visibility
= "hidden"; // fix gecko rendering
743 dropon
.parentNode
.insertBefore(element
, nextElement
);
744 if(dropon
.parentNode
!=oldParentNode
)
745 Sortable
.options(oldParentNode
).onChange(element
);
746 Sortable
.options(dropon
.parentNode
).onChange(element
);
751 onEmptyHover: function(element
, dropon
, overlap
) {
752 var oldParentNode
= element
.parentNode
;
753 var droponOptions
= Sortable
.options(dropon
);
755 if(!Element
.isParent(dropon
, element
)) {
758 var children
= Sortable
.findElements(dropon
, {tag
: droponOptions
.tag
, only
: droponOptions
.only
});
762 var offset
= Element
.offsetSize(dropon
, droponOptions
.overlap
) * (1.0 - overlap
);
764 for (index
= 0; index
< children
.length
; index
+= 1) {
765 if (offset
- Element
.offsetSize (children
[index
], droponOptions
.overlap
) >= 0) {
766 offset
-= Element
.offsetSize (children
[index
], droponOptions
.overlap
);
767 } else if (offset
- (Element
.offsetSize (children
[index
], droponOptions
.overlap
) / 2) >= 0) {
768 child
= index
+ 1 < children
.length
? children
[index
+ 1] : null;
771 child
= children
[index
];
777 dropon
.insertBefore(element
, child
);
779 Sortable
.options(oldParentNode
).onChange(element
);
780 droponOptions
.onChange(element
);
785 if(Sortable
._marker
) Sortable
._marker
.hide();
788 mark: function(dropon
, position
) {
789 // mark on ghosting only
790 var sortable
= Sortable
.options(dropon
.parentNode
);
791 if(sortable
&& !sortable
.ghosting
) return;
793 if(!Sortable
._marker
) {
795 ($('dropmarker') || Element
.extend(document
.createElement('DIV'))).
796 hide().addClassName('dropmarker').setStyle({position
:'absolute'});
797 document
.getElementsByTagName("body").item(0).appendChild(Sortable
._marker
);
799 var offsets
= Position
.cumulativeOffset(dropon
);
800 Sortable
._marker
.setStyle({left
: offsets
[0]+'px', top
: offsets
[1] + 'px'});
802 if(position
=='after')
803 if(sortable
.overlap
== 'horizontal')
804 Sortable
._marker
.setStyle({left
: (offsets
[0]+dropon
.clientWidth
) + 'px'});
806 Sortable
._marker
.setStyle({top
: (offsets
[1]+dropon
.clientHeight
) + 'px'});
808 Sortable
._marker
.show();
811 _tree: function(element
, options
, parent
) {
812 var children
= Sortable
.findElements(element
, options
) || [];
814 for (var i
= 0; i
< children
.length
; ++i
) {
815 var match
= children
[i
].id
.match(options
.format
);
817 if (!match
) continue;
820 id
: encodeURIComponent(match
? match
[1] : null),
824 position
: parent
.children
.length
,
825 container
: $(children
[i
]).down(options
.treeTag
)
828 /* Get the element containing the children and recurse over it */
830 this._tree(child
.container
, options
, child
)
832 parent
.children
.push (child
);
838 tree: function(element
) {
839 element
= $(element
);
840 var sortableOptions
= this.options(element
);
841 var options
= Object
.extend({
842 tag
: sortableOptions
.tag
,
843 treeTag
: sortableOptions
.treeTag
,
844 only
: sortableOptions
.only
,
846 format
: sortableOptions
.format
847 }, arguments
[1] || {});
857 return Sortable
._tree(element
, options
, root
);
860 /* Construct a [i] index for a particular node */
861 _constructIndex: function(node
) {
864 if (node
.id
) index
= '[' + node
.position
+ ']' + index
;
865 } while ((node
= node
.parent
) != null);
869 sequence: function(element
) {
870 element
= $(element
);
871 var options
= Object
.extend(this.options(element
), arguments
[1] || {});
873 return $(this.findElements(element
, options
) || []).map( function(item
) {
874 return item
.id
.match(options
.format
) ? item
.id
.match(options
.format
)[1] : '';
878 setSequence: function(element
, new_sequence
) {
879 element
= $(element
);
880 var options
= Object
.extend(this.options(element
), arguments
[2] || {});
883 this.findElements(element
, options
).each( function(n
) {
884 if (n
.id
.match(options
.format
))
885 nodeMap
[n
.id
.match(options
.format
)[1]] = [n
, n
.parentNode
];
886 n
.parentNode
.removeChild(n
);
889 new_sequence
.each(function(ident
) {
890 var n
= nodeMap
[ident
];
892 n
[1].appendChild(n
[0]);
893 delete nodeMap
[ident
];
898 serialize: function(element
) {
899 element
= $(element
);
900 var options
= Object
.extend(Sortable
.options(element
), arguments
[1] || {});
901 var name
= encodeURIComponent(
902 (arguments
[1] && arguments
[1].name
) ? arguments
[1].name
: element
.id
);
905 return Sortable
.tree(element
, arguments
[1]).children
.map( function (item
) {
906 return [name
+ Sortable
._constructIndex(item
) + "[id]=" +
907 encodeURIComponent(item
.id
)].concat(item
.children
.map(arguments
.callee
));
908 }).flatten().join('&');
910 return Sortable
.sequence(element
, arguments
[1]).map( function(item
) {
911 return name
+ "[]=" + encodeURIComponent(item
);
917 // Returns true if child is contained within element
918 Element
.isParent = function(child
, element
) {
919 if (!child
.parentNode
|| child
== element
) return false;
920 if (child
.parentNode
== element
) return true;
921 return Element
.isParent(child
.parentNode
, element
);
924 Element
.findChildren = function(element
, only
, recursive
, tagName
) {
925 if(!element
.hasChildNodes()) return null;
926 tagName
= tagName
.toUpperCase();
927 if(only
) only
= [only
].flatten();
929 $A(element
.childNodes
).each( function(e
) {
930 if(e
.tagName
&& e
.tagName
.toUpperCase()==tagName
&&
931 (!only
|| (Element
.classNames(e
).detect(function(v
) { return only
.include(v
) }))))
934 var grandchildren
= Element
.findChildren(e
, only
, recursive
, tagName
);
935 if(grandchildren
) elements
.push(grandchildren
);
939 return (elements
.length
>0 ? elements
.flatten() : []);
942 Element
.offsetSize = function (element
, type
) {
943 return element
['offset' + ((type
=='vertical' || type
=='height') ? 'Height' : 'Width')];