]>
git.wh0rd.org - tt-rss.git/blob - utils/notifier/lib/scriptaculous/dragdrop.js
1 // script.aculo.us dragdrop.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
3 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
4 // (c) 2005-2007 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(Object
.isUndefined(Effect
))
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(Object
.isArray(containment
)) {
32 containment
.each( function(c
) { options
._containers
.push($(c
)) });
34 options
._containers
.push($(containment
));
38 if(options
.accept
) options
.accept
= [options
.accept
].flatten();
40 Element
.makePositioned(element
); // fix IE
41 options
.element
= element
;
43 this.drops
.push(options
);
46 findDeepestChild: function(drops
) {
49 for (i
= 1; i
< drops
.length
; ++i
)
50 if (Element
.isParent(drops
[i
].element
, deepest
.element
))
56 isContained: function(element
, drop
) {
59 containmentNode
= element
.treeNode
;
61 containmentNode
= element
.parentNode
;
63 return drop
._containers
.detect(function(c
) { return containmentNode
== c
});
66 isAffected: function(point
, element
, drop
) {
68 (drop
.element
!=element
) &&
69 ((!drop
._containers
) ||
70 this.isContained(element
, drop
)) &&
72 (Element
.classNames(element
).detect(
73 function(v
) { return drop
.accept
.include(v
) } ) )) &&
74 Position
.within(drop
.element
, point
[0], point
[1]) );
77 deactivate: function(drop
) {
79 Element
.removeClassName(drop
.element
, drop
.hoverclass
);
80 this.last_active
= null;
83 activate: function(drop
) {
85 Element
.addClassName(drop
.element
, drop
.hoverclass
);
86 this.last_active
= drop
;
89 show: function(point
, element
) {
90 if(!this.drops
.length
) return;
91 var drop
, affected
= [];
93 this.drops
.each( function(drop
) {
94 if(Droppables
.isAffected(point
, element
, drop
))
99 drop
= Droppables
.findDeepestChild(affected
);
101 if(this.last_active
&& this.last_active
!= drop
) this.deactivate(this.last_active
);
103 Position
.within(drop
.element
, point
[0], point
[1]);
105 drop
.onHover(element
, drop
.element
, Position
.overlap(drop
.overlap
, drop
.element
));
107 if (drop
!= this.last_active
) Droppables
.activate(drop
);
111 fire: function(event
, element
) {
112 if(!this.last_active
) return;
115 if (this.isAffected([Event
.pointerX(event
), Event
.pointerY(event
)], element
, this.last_active
))
116 if (this.last_active
.onDrop
) {
117 this.last_active
.onDrop(element
, this.last_active
.element
, event
);
124 this.deactivate(this.last_active
);
132 register: function(draggable
) {
133 if(this.drags
.length
== 0) {
134 this.eventMouseUp
= this.endDrag
.bindAsEventListener(this);
135 this.eventMouseMove
= this.updateDrag
.bindAsEventListener(this);
136 this.eventKeypress
= this.keyPress
.bindAsEventListener(this);
138 Event
.observe(document
, "mouseup", this.eventMouseUp
);
139 Event
.observe(document
, "mousemove", this.eventMouseMove
);
140 Event
.observe(document
, "keypress", this.eventKeypress
);
142 this.drags
.push(draggable
);
145 unregister: function(draggable
) {
146 this.drags
= this.drags
.reject(function(d
) { return d
==draggable
});
147 if(this.drags
.length
== 0) {
148 Event
.stopObserving(document
, "mouseup", this.eventMouseUp
);
149 Event
.stopObserving(document
, "mousemove", this.eventMouseMove
);
150 Event
.stopObserving(document
, "keypress", this.eventKeypress
);
154 activate: function(draggable
) {
155 if(draggable
.options
.delay
) {
156 this._timeout
= setTimeout(function() {
157 Draggables
._timeout
= null;
159 Draggables
.activeDraggable
= draggable
;
160 }.bind(this), draggable
.options
.delay
);
162 window
.focus(); // allows keypress events if window isn't currently focused, fails for Safari
163 this.activeDraggable
= draggable
;
167 deactivate: function() {
168 this.activeDraggable
= null;
171 updateDrag: function(event
) {
172 if(!this.activeDraggable
) return;
173 var pointer
= [Event
.pointerX(event
), Event
.pointerY(event
)];
174 // Mozilla-based browsers fire successive mousemove events with
175 // the same coordinates, prevent needless redrawing (moz bug?)
176 if(this._lastPointer
&& (this._lastPointer
.inspect() == pointer
.inspect())) return;
177 this._lastPointer
= pointer
;
179 this.activeDraggable
.updateDrag(event
, pointer
);
182 endDrag: function(event
) {
184 clearTimeout(this._timeout
);
185 this._timeout
= null;
187 if(!this.activeDraggable
) return;
188 this._lastPointer
= null;
189 this.activeDraggable
.endDrag(event
);
190 this.activeDraggable
= null;
193 keyPress: function(event
) {
194 if(this.activeDraggable
)
195 this.activeDraggable
.keyPress(event
);
198 addObserver: function(observer
) {
199 this.observers
.push(observer
);
200 this._cacheObserverCallbacks();
203 removeObserver: function(element
) { // element instead of observer fixes mem leaks
204 this.observers
= this.observers
.reject( function(o
) { return o
.element
==element
});
205 this._cacheObserverCallbacks();
208 notify: function(eventName
, draggable
, event
) { // 'onStart', 'onEnd', 'onDrag'
209 if(this[eventName
+'Count'] > 0)
210 this.observers
.each( function(o
) {
211 if(o
[eventName
]) o
[eventName
](eventName
, draggable
, event
);
213 if(draggable
.options
[eventName
]) draggable
.options
[eventName
](draggable
, event
);
216 _cacheObserverCallbacks: function() {
217 ['onStart','onEnd','onDrag'].each( function(eventName
) {
218 Draggables
[eventName
+'Count'] = Draggables
.observers
.select(
219 function(o
) { return o
[eventName
]; }
225 /*--------------------------------------------------------------------------*/
227 var Draggable
= Class
.create({
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
= Object
.isNumber(element
._opacity
) ? 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
250 scrollSensitivity
: 20,
252 snap
: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
256 if(!arguments
[1] || Object
.isUndefined(arguments
[1].endeffect
))
257 Object
.extend(defaults
, {
258 starteffect: function(element
) {
259 element
._opacity
= Element
.getOpacity(element
);
260 Draggable
._dragging
[element
] = true;
261 new Effect
.Opacity(element
, {duration
:0.2, from:element
._opacity
, to
:0.7});
265 var options
= Object
.extend(defaults
, arguments
[1] || { });
267 this.element
= $(element
);
269 if(options
.handle
&& Object
.isString(options
.handle
))
270 this.handle
= this.element
.down('.'+options
.handle
, 0);
272 if(!this.handle
) this.handle
= $(options
.handle
);
273 if(!this.handle
) this.handle
= this.element
;
275 if(options
.scroll
&& !options
.scroll
.scrollTo
&& !options
.scroll
.outerHTML
) {
276 options
.scroll
= $(options
.scroll
);
277 this._isScrollChild
= Element
.childOf(this.element
, options
.scroll
);
280 Element
.makePositioned(this.element
); // fix IE
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(!Object
.isUndefined(Draggable
._dragging
[this.element
]) &&
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 this.delta
= this.currentDelta();
329 if(this.options
.zindex
) {
330 this.originalZ
= parseInt(Element
.getStyle(this.element
,'z-index') || 0);
331 this.element
.style
.zIndex
= this.options
.zindex
;
334 if(this.options
.ghosting
) {
335 this._clone
= this.element
.cloneNode(true);
336 this.element
._originallyAbsolute
= (this.element
.getStyle('position') == 'absolute');
337 if (!this.element
._originallyAbsolute
)
338 Position
.absolutize(this.element
);
339 this.element
.parentNode
.insertBefore(this._clone
, this.element
);
342 if(this.options
.scroll
) {
343 if (this.options
.scroll
== window
) {
344 var where
= this._getWindowScroll(this.options
.scroll
);
345 this.originalScrollLeft
= where
.left
;
346 this.originalScrollTop
= where
.top
;
348 this.originalScrollLeft
= this.options
.scroll
.scrollLeft
;
349 this.originalScrollTop
= this.options
.scroll
.scrollTop
;
353 Draggables
.notify('onStart', this, event
);
355 if(this.options
.starteffect
) this.options
.starteffect(this.element
);
358 updateDrag: function(event
, pointer
) {
359 if(!this.dragging
) this.startDrag(event
);
361 if(!this.options
.quiet
){
363 Droppables
.show(pointer
, this.element
);
366 Draggables
.notify('onDrag', this, event
);
369 if(this.options
.change
) this.options
.change(this);
371 if(this.options
.scroll
) {
372 this.stopScrolling();
375 if (this.options
.scroll
== window
) {
376 with(this._getWindowScroll(this.options
.scroll
)) { p
= [ left
, top
, left
+width
, top
+height
]; }
378 p
= Position
.page(this.options
.scroll
);
379 p
[0] += this.options
.scroll
.scrollLeft
+ Position
.deltaX
;
380 p
[1] += this.options
.scroll
.scrollTop
+ Position
.deltaY
;
381 p
.push(p
[0]+this.options
.scroll
.offsetWidth
);
382 p
.push(p
[1]+this.options
.scroll
.offsetHeight
);
385 if(pointer
[0] < (p
[0]+this.options
.scrollSensitivity
)) speed
[0] = pointer
[0]-(p
[0]+this.options
.scrollSensitivity
);
386 if(pointer
[1] < (p
[1]+this.options
.scrollSensitivity
)) speed
[1] = pointer
[1]-(p
[1]+this.options
.scrollSensitivity
);
387 if(pointer
[0] > (p
[2]-this.options
.scrollSensitivity
)) speed
[0] = pointer
[0]-(p
[2]-this.options
.scrollSensitivity
);
388 if(pointer
[1] > (p
[3]-this.options
.scrollSensitivity
)) speed
[1] = pointer
[1]-(p
[3]-this.options
.scrollSensitivity
);
389 this.startScrolling(speed
);
392 // fix AppleWebKit rendering
393 if(Prototype
.Browser
.WebKit
) window
.scrollBy(0,0);
398 finishDrag: function(event
, success
) {
399 this.dragging
= false;
401 if(this.options
.quiet
){
403 var pointer
= [Event
.pointerX(event
), Event
.pointerY(event
)];
404 Droppables
.show(pointer
, this.element
);
407 if(this.options
.ghosting
) {
408 if (!this.element
._originallyAbsolute
)
409 Position
.relativize(this.element
);
410 delete this.element
._originallyAbsolute
;
411 Element
.remove(this._clone
);
417 dropped
= Droppables
.fire(event
, this.element
);
418 if (!dropped
) dropped
= false;
420 if(dropped
&& this.options
.onDropped
) this.options
.onDropped(this.element
);
421 Draggables
.notify('onEnd', this, event
);
423 var revert
= this.options
.revert
;
424 if(revert
&& Object
.isFunction(revert
)) revert
= revert(this.element
);
426 var d
= this.currentDelta();
427 if(revert
&& this.options
.reverteffect
) {
428 if (dropped
== 0 || revert
!= 'failure')
429 this.options
.reverteffect(this.element
,
430 d
[1]-this.delta
[1], d
[0]-this.delta
[0]);
435 if(this.options
.zindex
)
436 this.element
.style
.zIndex
= this.originalZ
;
438 if(this.options
.endeffect
)
439 this.options
.endeffect(this.element
);
441 Draggables
.deactivate(this);
445 keyPress: function(event
) {
446 if(event
.keyCode
!=Event
.KEY_ESC
) return;
447 this.finishDrag(event
, false);
451 endDrag: function(event
) {
452 if(!this.dragging
) return;
453 this.stopScrolling();
454 this.finishDrag(event
, true);
458 draw: function(point
) {
459 var pos
= Position
.cumulativeOffset(this.element
);
460 if(this.options
.ghosting
) {
461 var r
= Position
.realOffset(this.element
);
462 pos
[0] += r
[0] - Position
.deltaX
; pos
[1] += r
[1] - Position
.deltaY
;
465 var d
= this.currentDelta();
466 pos
[0] -= d
[0]; pos
[1] -= d
[1];
468 if(this.options
.scroll
&& (this.options
.scroll
!= window
&& this._isScrollChild
)) {
469 pos
[0] -= this.options
.scroll
.scrollLeft
-this.originalScrollLeft
;
470 pos
[1] -= this.options
.scroll
.scrollTop
-this.originalScrollTop
;
473 var p
= [0,1].map(function(i
){
474 return (point
[i
]-pos
[i
]-this.offset
[i
])
477 if(this.options
.snap
) {
478 if(Object
.isFunction(this.options
.snap
)) {
479 p
= this.options
.snap(p
[0],p
[1],this);
481 if(Object
.isArray(this.options
.snap
)) {
482 p
= p
.map( function(v
, i
) {
483 return (v
/this.options
.snap
[i
]).round()*this.options
.snap
[i
] }.bind(this))
485 p
= p
.map( function(v
) {
486 return (v
/this.options
.snap
).round()*this.options
.snap
}.bind(this))
490 var style
= this.element
.style
;
491 if((!this.options
.constraint
) || (this.options
.constraint
=='horizontal'))
492 style
.left
= p
[0] + "px";
493 if((!this.options
.constraint
) || (this.options
.constraint
=='vertical'))
494 style
.top
= p
[1] + "px";
496 if(style
.visibility
=="hidden") style
.visibility
= ""; // fix gecko rendering
499 stopScrolling: function() {
500 if(this.scrollInterval
) {
501 clearInterval(this.scrollInterval
);
502 this.scrollInterval
= null;
503 Draggables
._lastScrollPointer
= null;
507 startScrolling: function(speed
) {
508 if(!(speed
[0] || speed
[1])) return;
509 this.scrollSpeed
= [speed
[0]*this.options
.scrollSpeed
,speed
[1]*this.options
.scrollSpeed
];
510 this.lastScrolled
= new Date();
511 this.scrollInterval
= setInterval(this.scroll
.bind(this), 10);
515 var current
= new Date();
516 var delta
= current
- this.lastScrolled
;
517 this.lastScrolled
= current
;
518 if(this.options
.scroll
== window
) {
519 with (this._getWindowScroll(this.options
.scroll
)) {
520 if (this.scrollSpeed
[0] || this.scrollSpeed
[1]) {
521 var d
= delta
/ 1000;
522 this.options
.scroll
.scrollTo( left
+ d
*this.scrollSpeed
[0], top
+ d
*this.scrollSpeed
[1] );
526 this.options
.scroll
.scrollLeft
+= this.scrollSpeed
[0] * delta
/ 1000;
527 this.options
.scroll
.scrollTop
+= this.scrollSpeed
[1] * delta
/ 1000;
531 Droppables
.show(Draggables
._lastPointer
, this.element
);
532 Draggables
.notify('onDrag', this);
533 if (this._isScrollChild
) {
534 Draggables
._lastScrollPointer
= Draggables
._lastScrollPointer
|| $A(Draggables
._lastPointer
);
535 Draggables
._lastScrollPointer
[0] += this.scrollSpeed
[0] * delta
/ 1000;
536 Draggables
._lastScrollPointer
[1] += this.scrollSpeed
[1] * delta
/ 1000;
537 if (Draggables
._lastScrollPointer
[0] < 0)
538 Draggables
._lastScrollPointer
[0] = 0;
539 if (Draggables
._lastScrollPointer
[1] < 0)
540 Draggables
._lastScrollPointer
[1] = 0;
541 this.draw(Draggables
._lastScrollPointer
);
544 if(this.options
.change
) this.options
.change(this);
547 _getWindowScroll: function(w
) {
550 if (w
.document
.documentElement
&& documentElement
.scrollTop
) {
551 T
= documentElement
.scrollTop
;
552 L
= documentElement
.scrollLeft
;
553 } else if (w
.document
.body
) {
560 } else if (w
.document
.documentElement
&& documentElement
.clientWidth
) {
561 W
= documentElement
.clientWidth
;
562 H
= documentElement
.clientHeight
;
564 W
= body
.offsetWidth
;
565 H
= body
.offsetHeight
568 return { top
: T
, left
: L
, width
: W
, height
: H
};
572 Draggable
._dragging
= { };
574 /*--------------------------------------------------------------------------*/
576 var SortableObserver
= Class
.create({
577 initialize: function(element
, observer
) {
578 this.element
= $(element
);
579 this.observer
= observer
;
580 this.lastValue
= Sortable
.serialize(this.element
);
583 onStart: function() {
584 this.lastValue
= Sortable
.serialize(this.element
);
589 if(this.lastValue
!= Sortable
.serialize(this.element
))
590 this.observer(this.element
)
595 SERIALIZE_RULE
: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
599 _findRootElement: function(element
) {
600 while (element
.tagName
.toUpperCase() != "BODY") {
601 if(element
.id
&& Sortable
.sortables
[element
.id
]) return element
;
602 element
= element
.parentNode
;
606 options: function(element
) {
607 element
= Sortable
._findRootElement($(element
));
609 return Sortable
.sortables
[element
.id
];
612 destroy: function(element
){
613 var s
= Sortable
.options(element
);
616 Draggables
.removeObserver(s
.element
);
617 s
.droppables
.each(function(d
){ Droppables
.remove(d
) });
618 s
.draggables
.invoke('destroy');
620 delete Sortable
.sortables
[s
.element
.id
];
624 create: function(element
) {
625 element
= $(element
);
626 var options
= Object
.extend({
628 tag
: 'li', // assumes li children, override with tag: 'tagname'
632 overlap
: 'vertical', // one of 'vertical', 'horizontal'
633 constraint
: 'vertical', // one of 'vertical', 'horizontal', false
634 containment
: element
, // also takes array of elements (or id's); or false
635 handle
: false, // or a CSS class
642 scrollSensitivity
: 20,
644 format
: this.SERIALIZE_RULE
,
646 // these take arrays of elements or ids and can be
647 // used for better initialization performance
651 onChange
: Prototype
.emptyFunction
,
652 onUpdate
: Prototype
.emptyFunction
653 }, arguments
[1] || { });
655 // clear any old sortable with same element
656 this.destroy(element
);
658 // build options for the draggables
659 var options_for_draggable
= {
661 quiet
: options
.quiet
,
662 scroll
: options
.scroll
,
663 scrollSpeed
: options
.scrollSpeed
,
664 scrollSensitivity
: options
.scrollSensitivity
,
665 delay
: options
.delay
,
666 ghosting
: options
.ghosting
,
667 constraint
: options
.constraint
,
668 handle
: options
.handle
};
670 if(options
.starteffect
)
671 options_for_draggable
.starteffect
= options
.starteffect
;
673 if(options
.reverteffect
)
674 options_for_draggable
.reverteffect
= options
.reverteffect
;
676 if(options
.ghosting
) options_for_draggable
.reverteffect = function(element
) {
677 element
.style
.top
= 0;
678 element
.style
.left
= 0;
681 if(options
.endeffect
)
682 options_for_draggable
.endeffect
= options
.endeffect
;
685 options_for_draggable
.zindex
= options
.zindex
;
687 // build options for the droppables
688 var options_for_droppable
= {
689 overlap
: options
.overlap
,
690 containment
: options
.containment
,
692 hoverclass
: options
.hoverclass
,
693 onHover
: Sortable
.onHover
696 var options_for_tree
= {
697 onHover
: Sortable
.onEmptyHover
,
698 overlap
: options
.overlap
,
699 containment
: options
.containment
,
700 hoverclass
: options
.hoverclass
703 // fix for gecko engine
704 Element
.cleanWhitespace(element
);
706 options
.draggables
= [];
707 options
.droppables
= [];
709 // drop on empty handling
710 if(options
.dropOnEmpty
|| options
.tree
) {
711 Droppables
.add(element
, options_for_tree
);
712 options
.droppables
.push(element
);
715 (options
.elements
|| this.findElements(element
, options
) || []).each( function(e
,i
) {
716 var handle
= options
.handles
? $(options
.handles
[i
]) :
717 (options
.handle
? $(e
).select('.' + options
.handle
)[0] : e
);
718 options
.draggables
.push(
719 new Draggable(e
, Object
.extend(options_for_draggable
, { handle
: handle
})));
720 Droppables
.add(e
, options_for_droppable
);
721 if(options
.tree
) e
.treeNode
= element
;
722 options
.droppables
.push(e
);
726 (Sortable
.findTreeElements(element
, options
) || []).each( function(e
) {
727 Droppables
.add(e
, options_for_tree
);
728 e
.treeNode
= element
;
729 options
.droppables
.push(e
);
734 this.sortables
[element
.id
] = options
;
737 Draggables
.addObserver(new SortableObserver(element
, options
.onUpdate
));
741 // return all suitable-for-sortable elements in a guaranteed order
742 findElements: function(element
, options
) {
743 return Element
.findChildren(
744 element
, options
.only
, options
.tree
? true : false, options
.tag
);
747 findTreeElements: function(element
, options
) {
748 return Element
.findChildren(
749 element
, options
.only
, options
.tree
? true : false, options
.treeTag
);
752 onHover: function(element
, dropon
, overlap
) {
753 if(Element
.isParent(dropon
, element
)) return;
755 if(overlap
> .33 && overlap
< .66 && Sortable
.options(dropon
).tree
) {
757 } else if(overlap
>0.5) {
758 Sortable
.mark(dropon
, 'before');
759 if(dropon
.previousSibling
!= element
) {
760 var oldParentNode
= element
.parentNode
;
761 element
.style
.visibility
= "hidden"; // fix gecko rendering
762 dropon
.parentNode
.insertBefore(element
, dropon
);
763 if(dropon
.parentNode
!=oldParentNode
)
764 Sortable
.options(oldParentNode
).onChange(element
);
765 Sortable
.options(dropon
.parentNode
).onChange(element
);
768 Sortable
.mark(dropon
, 'after');
769 var nextElement
= dropon
.nextSibling
|| null;
770 if(nextElement
!= element
) {
771 var oldParentNode
= element
.parentNode
;
772 element
.style
.visibility
= "hidden"; // fix gecko rendering
773 dropon
.parentNode
.insertBefore(element
, nextElement
);
774 if(dropon
.parentNode
!=oldParentNode
)
775 Sortable
.options(oldParentNode
).onChange(element
);
776 Sortable
.options(dropon
.parentNode
).onChange(element
);
781 onEmptyHover: function(element
, dropon
, overlap
) {
782 var oldParentNode
= element
.parentNode
;
783 var droponOptions
= Sortable
.options(dropon
);
785 if(!Element
.isParent(dropon
, element
)) {
788 var children
= Sortable
.findElements(dropon
, {tag
: droponOptions
.tag
, only
: droponOptions
.only
});
792 var offset
= Element
.offsetSize(dropon
, droponOptions
.overlap
) * (1.0 - overlap
);
794 for (index
= 0; index
< children
.length
; index
+= 1) {
795 if (offset
- Element
.offsetSize (children
[index
], droponOptions
.overlap
) >= 0) {
796 offset
-= Element
.offsetSize (children
[index
], droponOptions
.overlap
);
797 } else if (offset
- (Element
.offsetSize (children
[index
], droponOptions
.overlap
) / 2) >= 0) {
798 child
= index
+ 1 < children
.length
? children
[index
+ 1] : null;
801 child
= children
[index
];
807 dropon
.insertBefore(element
, child
);
809 Sortable
.options(oldParentNode
).onChange(element
);
810 droponOptions
.onChange(element
);
815 if(Sortable
._marker
) Sortable
._marker
.hide();
818 mark: function(dropon
, position
) {
819 // mark on ghosting only
820 var sortable
= Sortable
.options(dropon
.parentNode
);
821 if(sortable
&& !sortable
.ghosting
) return;
823 if(!Sortable
._marker
) {
825 ($('dropmarker') || Element
.extend(document
.createElement('DIV'))).
826 hide().addClassName('dropmarker').setStyle({position
:'absolute'});
827 document
.getElementsByTagName("body").item(0).appendChild(Sortable
._marker
);
829 var offsets
= Position
.cumulativeOffset(dropon
);
830 Sortable
._marker
.setStyle({left
: offsets
[0]+'px', top
: offsets
[1] + 'px'});
832 if(position
=='after')
833 if(sortable
.overlap
== 'horizontal')
834 Sortable
._marker
.setStyle({left
: (offsets
[0]+dropon
.clientWidth
) + 'px'});
836 Sortable
._marker
.setStyle({top
: (offsets
[1]+dropon
.clientHeight
) + 'px'});
838 Sortable
._marker
.show();
841 _tree: function(element
, options
, parent
) {
842 var children
= Sortable
.findElements(element
, options
) || [];
844 for (var i
= 0; i
< children
.length
; ++i
) {
845 var match
= children
[i
].id
.match(options
.format
);
847 if (!match
) continue;
850 id
: encodeURIComponent(match
? match
[1] : null),
854 position
: parent
.children
.length
,
855 container
: $(children
[i
]).down(options
.treeTag
)
858 /* Get the element containing the children and recurse over it */
860 this._tree(child
.container
, options
, child
)
862 parent
.children
.push (child
);
868 tree: function(element
) {
869 element
= $(element
);
870 var sortableOptions
= this.options(element
);
871 var options
= Object
.extend({
872 tag
: sortableOptions
.tag
,
873 treeTag
: sortableOptions
.treeTag
,
874 only
: sortableOptions
.only
,
876 format
: sortableOptions
.format
877 }, arguments
[1] || { });
887 return Sortable
._tree(element
, options
, root
);
890 /* Construct a [i] index for a particular node */
891 _constructIndex: function(node
) {
894 if (node
.id
) index
= '[' + node
.position
+ ']' + index
;
895 } while ((node
= node
.parent
) != null);
899 sequence: function(element
) {
900 element
= $(element
);
901 var options
= Object
.extend(this.options(element
), arguments
[1] || { });
903 return $(this.findElements(element
, options
) || []).map( function(item
) {
904 return item
.id
.match(options
.format
) ? item
.id
.match(options
.format
)[1] : '';
908 setSequence: function(element
, new_sequence
) {
909 element
= $(element
);
910 var options
= Object
.extend(this.options(element
), arguments
[2] || { });
913 this.findElements(element
, options
).each( function(n
) {
914 if (n
.id
.match(options
.format
))
915 nodeMap
[n
.id
.match(options
.format
)[1]] = [n
, n
.parentNode
];
916 n
.parentNode
.removeChild(n
);
919 new_sequence
.each(function(ident
) {
920 var n
= nodeMap
[ident
];
922 n
[1].appendChild(n
[0]);
923 delete nodeMap
[ident
];
928 serialize: function(element
) {
929 element
= $(element
);
930 var options
= Object
.extend(Sortable
.options(element
), arguments
[1] || { });
931 var name
= encodeURIComponent(
932 (arguments
[1] && arguments
[1].name
) ? arguments
[1].name
: element
.id
);
935 return Sortable
.tree(element
, arguments
[1]).children
.map( function (item
) {
936 return [name
+ Sortable
._constructIndex(item
) + "[id]=" +
937 encodeURIComponent(item
.id
)].concat(item
.children
.map(arguments
.callee
));
938 }).flatten().join('&');
940 return Sortable
.sequence(element
, arguments
[1]).map( function(item
) {
941 return name
+ "[]=" + encodeURIComponent(item
);
947 // Returns true if child is contained within element
948 Element
.isParent = function(child
, element
) {
949 if (!child
.parentNode
|| child
== element
) return false;
950 if (child
.parentNode
== element
) return true;
951 return Element
.isParent(child
.parentNode
, element
);
954 Element
.findChildren = function(element
, only
, recursive
, tagName
) {
955 if(!element
.hasChildNodes()) return null;
956 tagName
= tagName
.toUpperCase();
957 if(only
) only
= [only
].flatten();
959 $A(element
.childNodes
).each( function(e
) {
960 if(e
.tagName
&& e
.tagName
.toUpperCase()==tagName
&&
961 (!only
|| (Element
.classNames(e
).detect(function(v
) { return only
.include(v
) }))))
964 var grandchildren
= Element
.findChildren(e
, only
, recursive
, tagName
);
965 if(grandchildren
) elements
.push(grandchildren
);
969 return (elements
.length
>0 ? elements
.flatten() : []);
972 Element
.offsetSize = function (element
, type
) {
973 return element
['offset' + ((type
=='vertical' || type
=='height') ? 'Height' : 'Width')];