Ticket #5071: dragdrop.patch

File dragdrop.patch, 63.3 kB (added by d15c1pl3, 2 years ago)
Boundry Constraints

dragdrop.js

old	new
1		// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
2		// (c) 2005 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
3		//
4		// script.aculo.us is freely distributable under the terms of an MIT-style license.
5		// For details, see the script.aculo.us web site: http://script.aculo.us/
6
7		if(typeof Effect == 'undefined')
8		throw("dragdrop.js requires including script.aculo.us' effects.js library");
9
10		var Droppables = {
11		drops: [],
12
13		remove: function(element) {
14		this.drops = this.drops.reject(function(d) { return d.element==$(element) });
15		},
16
17		add: function(element) {
18		element = $(element);
19		var options = Object.extend({
20		greedy: true,
21		hoverclass: null,
22		tree: false
23		}, arguments[1] \|\| {});
24
25		// cache containers
26		if(options.containment) {
27		options._containers = [];
28		var containment = options.containment;
29		if((typeof containment == 'object') &&
30		(containment.constructor == Array)) {
31		containment.each( function(c) { options._containers.push($(c)) });
32		} else {
33		options._containers.push($(containment));
34		}
35		}
36
37		if(options.accept) options.accept = [options.accept].flatten();
38
39		Element.makePositioned(element); // fix IE
40		options.element = element;
41
42		this.drops.push(options);
43		},
44
45		findDeepestChild: function(drops) {
46		deepest = drops[0];
47
48		for (i = 1; i < drops.length; ++i)
49		if (Element.isParent(drops[i].element, deepest.element))
50		deepest = drops[i];
51
52		return deepest;
53		},
54
55		isContained: function(element, drop) {
56		var containmentNode;
57		if(drop.tree) {
58		containmentNode = element.treeNode;
59		} else {
60		containmentNode = element.parentNode;
61		}
62		return drop._containers.detect(function(c) { return containmentNode == c });
63		},
64
65		isAffected: function(point, element, drop) {
66		return (
67		(drop.element!=element) &&
68		((!drop._containers) \|\|
69		this.isContained(element, drop)) &&
70		((!drop.accept) \|\|
71		(Element.classNames(element).detect(
72		function(v) { return drop.accept.include(v) } ) )) &&
73		Position.within(drop.element, point[0], point[1]) );
74		},
75
76		deactivate: function(drop) {
77		if(drop.hoverclass)
78		Element.removeClassName(drop.element, drop.hoverclass);
79		this.last_active = null;
80		},
81
82		activate: function(drop) {
83		if(drop.hoverclass)
84		Element.addClassName(drop.element, drop.hoverclass);
85		this.last_active = drop;
86		},
87
88		show: function(point, element) {
89		if(!this.drops.length) return;
90		var affected = [];
91
92		if(this.last_active) this.deactivate(this.last_active);
93		this.drops.each( function(drop) {
94		if(Droppables.isAffected(point, element, drop))
95		affected.push(drop);
96		});
97
98		if(affected.length>0) {
99		drop = Droppables.findDeepestChild(affected);
100		Position.within(drop.element, point[0], point[1]);
101		if(drop.onHover)
102		drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
103
104		Droppables.activate(drop);
105		}
106		},
107
108		fire: function(event, element) {
109		if(!this.last_active) return;
110		Position.prepare();
111
112		if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
113		if (this.last_active.onDrop)
114		this.last_active.onDrop(element, this.last_active.element, event);
115		},
116
117		reset: function() {
118		if(this.last_active)
119		this.deactivate(this.last_active);
120		}
121		}
122
123		var Draggables = {
124		drags: [],
125		observers: [],
126
127		register: function(draggable) {
128		if(this.drags.length == 0) {
129		this.eventMouseUp = this.endDrag.bindAsEventListener(this);
130		this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
131		this.eventKeypress = this.keyPress.bindAsEventListener(this);
132
133		Event.observe(document, "mouseup", this.eventMouseUp);
134		Event.observe(document, "mousemove", this.eventMouseMove);
135		Event.observe(document, "keypress", this.eventKeypress);
136		}
137		this.drags.push(draggable);
138		},
139
140		unregister: function(draggable) {
141		this.drags = this.drags.reject(function(d) { return d==draggable });
142		if(this.drags.length == 0) {
143		Event.stopObserving(document, "mouseup", this.eventMouseUp);
144		Event.stopObserving(document, "mousemove", this.eventMouseMove);
145		Event.stopObserving(document, "keypress", this.eventKeypress);
146		}
147		},
148
149		activate: function(draggable) {
150		if(draggable.options.delay) {
151		this._timeout = setTimeout(function() {
152		Draggables._timeout = null;
153		window.focus();
154		Draggables.activeDraggable = draggable;
155		}.bind(this), draggable.options.delay);
156		} else {
157		window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
158		this.activeDraggable = draggable;
159		}
160		},
161
162		deactivate: function() {
163		this.activeDraggable = null;
164		},
165
166		updateDrag: function(event) {
167		if(!this.activeDraggable) return;
168		var pointer = [Event.pointerX(event), Event.pointerY(event)];
169		// Mozilla-based browsers fire successive mousemove events with
170		// the same coordinates, prevent needless redrawing (moz bug?)
171		if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
172		this._lastPointer = pointer;
173
174		this.activeDraggable.updateDrag(event, pointer);
175		},
176
177		endDrag: function(event) {
178		if(this._timeout) {
179		clearTimeout(this._timeout);
180		this._timeout = null;
181		}
182		if(!this.activeDraggable) return;
183		this._lastPointer = null;
184		this.activeDraggable.endDrag(event);
185		this.activeDraggable = null;
186		},
187
188		keyPress: function(event) {
189		if(this.activeDraggable)
190		this.activeDraggable.keyPress(event);
191		},
192
193		addObserver: function(observer) {
194		this.observers.push(observer);
195		this._cacheObserverCallbacks();
196		},
197
198		removeObserver: function(element) { // element instead of observer fixes mem leaks
199		this.observers = this.observers.reject( function(o) { return o.element==element });
200		this._cacheObserverCallbacks();
201		},
202
203		notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag'
204		if(this[eventName+'Count'] > 0)
205		this.observers.each( function(o) {
206		if(o[eventName]) o[eventName](eventName, draggable, event);
207		});
208		if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
209		},
210
211		_cacheObserverCallbacks: function() {
212		['onStart','onEnd','onDrag'].each( function(eventName) {
213		Draggables[eventName+'Count'] = Draggables.observers.select(
214		function(o) { return o[eventName]; }
215		).length;
216		});
217		}
218		}
219
220		/--------------------------------------------------------------------------/
221
222		var Draggable = Class.create();
223		Draggable._dragging = {};
224
225		Draggable.prototype = {
226		initialize: function(element) {
227		var defaults = {
228		handle: false,
229		reverteffect: function(element, top_offset, left_offset) {
230		var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
231		new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
232		queue: {scope:'_draggable', position:'end'}
233		});
234		},
235		endeffect: function(element) {
236		var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0;
237		new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
238		queue: {scope:'_draggable', position:'end'},
239		afterFinish: function(){
240		Draggable._dragging[element] = false
241		}
242		});
243		},
244		zindex: 1000,
245		revert: false,
246		scroll: false,
247		scrollSensitivity: 20,
248		scrollSpeed: 15,
249		snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
250		delay: 0
251		};
252
253		if(!arguments[1] \|\| typeof arguments[1].endeffect == 'undefined')
254		Object.extend(defaults, {
255		starteffect: function(element) {
256		element._opacity = Element.getOpacity(element);
257		Draggable._dragging[element] = true;
258		new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
259		}
260		});
261
262		var options = Object.extend(defaults, arguments[1] \|\| {});
263
264		this.element = $(element);
265
266		if(options.handle && (typeof options.handle == 'string'))
267		this.handle = this.element.down('.'+options.handle, 0);
268
269		if(!this.handle) this.handle = $(options.handle);
270		if(!this.handle) this.handle = this.element;
271
272		if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
273		options.scroll = $(options.scroll);
274		this._isScrollChild = Element.childOf(this.element, options.scroll);
275		}
276
277		Element.makePositioned(this.element); // fix IE
278
279		this.delta = this.currentDelta();
280		this.options = options;
281		this.dragging = false;
282
283		this.eventMouseDown = this.initDrag.bindAsEventListener(this);
284		Event.observe(this.handle, "mousedown", this.eventMouseDown);
285
286		Draggables.register(this);
287		},
288
289		destroy: function() {
290		Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
291		Draggables.unregister(this);
292		},
293
294		currentDelta: function() {
295		return([
296		parseInt(Element.getStyle(this.element,'left') \|\| '0'),
297		parseInt(Element.getStyle(this.element,'top') \|\| '0')]);
298		},
299
300		initDrag: function(event) {
301		if(typeof Draggable._dragging[this.element] != 'undefined' &&
302		Draggable._dragging[this.element]) return;
303		if(Event.isLeftClick(event)) {
304		// abort on form elements, fixes a Firefox issue
305		var src = Event.element(event);
306		if(src.tagName && (
307		src.tagName=='INPUT' \|\|
308		src.tagName=='SELECT' \|\|
309		src.tagName=='OPTION' \|\|
310		src.tagName=='BUTTON' \|\|
311		src.tagName=='TEXTAREA')) return;
312
313		var pointer = [Event.pointerX(event), Event.pointerY(event)];
314		var pos = Position.cumulativeOffset(this.element);
315		this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
316
317		Draggables.activate(this);
318		Event.stop(event);
319		}
320		},
321
322		startDrag: function(event) {
323		this.dragging = true;
324
325		if(this.options.zindex) {
326		this.originalZ = parseInt(Element.getStyle(this.element,'z-index') \|\| 0);
327		this.element.style.zIndex = this.options.zindex;
328		}
329
330		if(this.options.ghosting) {
331		this._clone = this.element.cloneNode(true);
332		Position.absolutize(this.element);
333		this.element.parentNode.insertBefore(this._clone, this.element);
334		}
335
336		if(this.options.scroll) {
337		if (this.options.scroll == window) {
338		var where = this._getWindowScroll(this.options.scroll);
339		this.originalScrollLeft = where.left;
340		this.originalScrollTop = where.top;
341		} else {
342		this.originalScrollLeft = this.options.scroll.scrollLeft;
343		this.originalScrollTop = this.options.scroll.scrollTop;
344		}
345		}
346
347		Draggables.notify('onStart', this, event);
348
349		if(this.options.starteffect) this.options.starteffect(this.element);
350		},
351
352		updateDrag: function(event, pointer) {
353		if(!this.dragging) this.startDrag(event);
354		Position.prepare();
355		Droppables.show(pointer, this.element);
356		Draggables.notify('onDrag', this, event);
357
358		this.draw(pointer);
359		if(this.options.change) this.options.change(this);
360
361		if(this.options.scroll) {
362		this.stopScrolling();
363
364		var p;
365		if (this.options.scroll == window) {
366		with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
367		} else {
368		p = Position.page(this.options.scroll);
369		p[0] += this.options.scroll.scrollLeft + Position.deltaX;
370		p[1] += this.options.scroll.scrollTop + Position.deltaY;
371		p.push(p[0]+this.options.scroll.offsetWidth);
372		p.push(p[1]+this.options.scroll.offsetHeight);
373		}
374		var speed = [0,0];
375		if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
376		if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
377		if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
378		if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
379		this.startScrolling(speed);
380		}
381
382		// fix AppleWebKit rendering
383		if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
384
385		Event.stop(event);
386		},
387
388		finishDrag: function(event, success) {
389		this.dragging = false;
390
391		if(this.options.ghosting) {
392		Position.relativize(this.element);
393		Element.remove(this._clone);
394		this._clone = null;
395		}
396
397		if(success) Droppables.fire(event, this.element);
398		Draggables.notify('onEnd', this, event);
399
400		var revert = this.options.revert;
401		if(revert && typeof revert == 'function') revert = revert(this.element);
402
403		var d = this.currentDelta();
404		if(revert && this.options.reverteffect) {
405		this.options.reverteffect(this.element,
406		d[1]-this.delta[1], d[0]-this.delta[0]);
407		} else {
408		this.delta = d;
409		}
410
411		if(this.options.zindex)
412		this.element.style.zIndex = this.originalZ;
413
414		if(this.options.endeffect)
415		this.options.endeffect(this.element);
416
417		Draggables.deactivate(this);
418		Droppables.reset();
419		},
420
421		keyPress: function(event) {
422		if(event.keyCode!=Event.KEY_ESC) return;
423		this.finishDrag(event, false);
424		Event.stop(event);
425		},
426
427		endDrag: function(event) {
428		if(!this.dragging) return;
429		this.stopScrolling();
430		this.finishDrag(event, true);
431		Event.stop(event);
432		},
433
434		draw: function(point) {
435		var pos = Position.cumulativeOffset(this.element);
436		if(this.options.ghosting) {
437		var r = Position.realOffset(this.element);
438		pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
439		}
440
441		var d = this.currentDelta();
442		pos[0] -= d[0]; pos[1] -= d[1];
443
444		if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
445		pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
446		pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
447		}
448
449		var p = [0,1].map(function(i){
450		return (point[i]-pos[i]-this.offset[i])
451		}.bind(this));
452
453		if(this.options.snap) {
454		if(typeof this.options.snap == 'function') {
455		p = this.options.snap(p[0],p[1],this);
456		} else {
457		if(this.options.snap instanceof Array) {
458		p = p.map( function(v, i) {
459		return Math.round(v/this.options.snap[i])*this.options.snap[i] }.bind(this))
460		} else {
461		p = p.map( function(v) {
462		return Math.round(v/this.options.snap)*this.options.snap }.bind(this))
463		}
464		}}
465
466		var style = this.element.style;
467		if((!this.options.constraint) \|\| (this.options.constraint=='horizontal'))
468		style.left = p[0] + "px";
469		if((!this.options.constraint) \|\| (this.options.constraint=='vertical'))
470		style.top = p[1] + "px";
471
472		if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
473		},
474
475		stopScrolling: function() {
476		if(this.scrollInterval) {
477		clearInterval(this.scrollInterval);
478		this.scrollInterval = null;
479		Draggables._lastScrollPointer = null;
480		}
481		},
482
483		startScrolling: function(speed) {
484		if(!(speed[0] \|\| speed[1])) return;
485		this.scrollSpeed = [speed[0]this.options.scrollSpeed,speed[1]this.options.scrollSpeed];
486		this.lastScrolled = new Date();
487		this.scrollInterval = setInterval(this.scroll.bind(this), 10);
488		},
489
490		scroll: function() {
491		var current = new Date();
492		var delta = current - this.lastScrolled;
493		this.lastScrolled = current;
494		if(this.options.scroll == window) {
495		with (this._getWindowScroll(this.options.scroll)) {
496		if (this.scrollSpeed[0] \|\| this.scrollSpeed[1]) {
497		var d = delta / 1000;
498		this.options.scroll.scrollTo( left + dthis.scrollSpeed[0], top + dthis.scrollSpeed[1] );
499		}
500		}
501		} else {
502		this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
503		this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
504		}
505
506		Position.prepare();
507		Droppables.show(Draggables._lastPointer, this.element);
508		Draggables.notify('onDrag', this);
509		if (this._isScrollChild) {
510		Draggables._lastScrollPointer = Draggables._lastScrollPointer \|\| $A(Draggables._lastPointer);
511		Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
512		Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
513		if (Draggables._lastScrollPointer[0] < 0)
514		Draggables._lastScrollPointer[0] = 0;
515		if (Draggables._lastScrollPointer[1] < 0)
516		Draggables._lastScrollPointer[1] = 0;
517		this.draw(Draggables._lastScrollPointer);
518		}
519
520		if(this.options.change) this.options.change(this);
521		},
522
523		_getWindowScroll: function(w) {
524		var T, L, W, H;
525		with (w.document) {
526		if (w.document.documentElement && documentElement.scrollTop) {
527		T = documentElement.scrollTop;
528		L = documentElement.scrollLeft;
529		} else if (w.document.body) {
530		T = body.scrollTop;
531		L = body.scrollLeft;
532		}
533		if (w.innerWidth) {
534		W = w.innerWidth;
535		H = w.innerHeight;
536		} else if (w.document.documentElement && documentElement.clientWidth) {
537		W = documentElement.clientWidth;
538		H = documentElement.clientHeight;
539		} else {
540		W = body.offsetWidth;
541		H = body.offsetHeight
542		}
543		}
544		return { top: T, left: L, width: W, height: H };
545		}
546		}
547
548		/--------------------------------------------------------------------------/
549
550		var SortableObserver = Class.create();
551		SortableObserver.prototype = {
552		initialize: function(element, observer) {
553		this.element = $(element);
554		this.observer = observer;
555		this.lastValue = Sortable.serialize(this.element);
556		},
557
558		onStart: function() {
559		this.lastValue = Sortable.serialize(this.element);
560		},
561
562		onEnd: function() {
563		Sortable.unmark();
564		if(this.lastValue != Sortable.serialize(this.element))
565		this.observer(this.element)
566		}
567		}
568
569		var Sortable = {
570		SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_])[_](.)$/,
571
572		sortables: {},
573
574		_findRootElement: function(element) {
575		while (element.tagName != "BODY") {
576		if(element.id && Sortable.sortables[element.id]) return element;
577		element = element.parentNode;
578		}
579		},
580
581		options: function(element) {
582		element = Sortable._findRootElement($(element));
583		if(!element) return;
584		return Sortable.sortables[element.id];
585		},
586
587		destroy: function(element){
588		var s = Sortable.options(element);
589
590		if(s) {
591		Draggables.removeObserver(s.element);
592		s.droppables.each(function(d){ Droppables.remove(d) });
593		s.draggables.invoke('destroy');
594
595		delete Sortable.sortables[s.element.id];
596		}
597		},
598
599		create: function(element) {
600		element = $(element);
601		var options = Object.extend({
602		element: element,
603		tag: 'li', // assumes li children, override with tag: 'tagname'
604		dropOnEmpty: false,
605		tree: false,
606		treeTag: 'ul',
607		overlap: 'vertical', // one of 'vertical', 'horizontal'
608		constraint: 'vertical', // one of 'vertical', 'horizontal', false
609		containment: element, // also takes array of elements (or id's); or false
610		handle: false, // or a CSS class
611		only: false,
612		delay: 0,
613		hoverclass: null,
614		ghosting: false,
615		scroll: false,
616		scrollSensitivity: 20,
617		scrollSpeed: 15,
618		format: this.SERIALIZE_RULE,
619		onChange: Prototype.emptyFunction,
620		onUpdate: Prototype.emptyFunction
621		}, arguments[1] \|\| {});
622
623		// clear any old sortable with same element
624		this.destroy(element);
625
626		// build options for the draggables
627		var options_for_draggable = {
628		revert: true,
629		scroll: options.scroll,
630		scrollSpeed: options.scrollSpeed,
631		scrollSensitivity: options.scrollSensitivity,
632		delay: options.delay,
633		ghosting: options.ghosting,
634		constraint: options.constraint,
635		handle: options.handle };
636
637		if(options.starteffect)
638		options_for_draggable.starteffect = options.starteffect;
639
640		if(options.reverteffect)
641		options_for_draggable.reverteffect = options.reverteffect;
642		else
643		if(options.ghosting) options_for_draggable.reverteffect = function(element) {
644		element.style.top = 0;
645		element.style.left = 0;
646		};
647
648		if(options.endeffect)
649		options_for_draggable.endeffect = options.endeffect;
650
651		if(options.zindex)
652		options_for_draggable.zindex = options.zindex;
653
654		// build options for the droppables
655		var options_for_droppable = {
656		overlap: options.overlap,
657		containment: options.containment,
658		tree: options.tree,
659		hoverclass: options.hoverclass,
660		onHover: Sortable.onHover
661		}
662
663		var options_for_tree = {
664		onHover: Sortable.onEmptyHover,
665		overlap: options.overlap,
666		containment: options.containment,
667		hoverclass: options.hoverclass
668		}
669
670		// fix for gecko engine
671		Element.cleanWhitespace(element);
672
673		options.draggables = [];
674		options.droppables = [];
675
676		// drop on empty handling
677		if(options.dropOnEmpty \|\| options.tree) {
678		Droppables.add(element, options_for_tree);
679		options.droppables.push(element);
680		}
681
682		(this.findElements(element, options) \|\| []).each( function(e) {
683		// handles are per-draggable
684		var handle = options.handle ?
685		$(e).down('.'+options.handle,0) : e;
686		options.draggables.push(
687		new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
688		Droppables.add(e, options_for_droppable);
689		if(options.tree) e.treeNode = element;
690		options.droppables.push(e);
691		});
692
693		if(options.tree) {
694		(Sortable.findTreeElements(element, options) \|\| []).each( function(e) {
695		Droppables.add(e, options_for_tree);
696		e.treeNode = element;
697		options.droppables.push(e);
698		});
699		}
700
701		// keep reference
702		this.sortables[element.id] = options;
703
704		// for onupdate
705		Draggables.addObserver(new SortableObserver(element, options.onUpdate));
706
707		},
708
709		// return all suitable-for-sortable elements in a guaranteed order
710		findElements: function(element, options) {
711		return Element.findChildren(
712		element, options.only, options.tree ? true : false, options.tag);
713		},
714
715		findTreeElements: function(element, options) {
716		return Element.findChildren(
717		element, options.only, options.tree ? true : false, options.treeTag);
718		},
719
720		onHover: function(element, dropon, overlap) {
721		if(Element.isParent(dropon, element)) return;
722
723		if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
724		return;
725		} else if(overlap>0.5) {
726		Sortable.mark(dropon, 'before');
727		if(dropon.previousSibling != element) {
728		var oldParentNode = element.parentNode;
729		element.style.visibility = "hidden"; // fix gecko rendering
730		dropon.parentNode.insertBefore(element, dropon);
731		if(dropon.parentNode!=oldParentNode)
732		Sortable.options(oldParentNode).onChange(element);
733		Sortable.options(dropon.parentNode).onChange(element);
734		}
735		} else {
736		Sortable.mark(dropon, 'after');
737		var nextElement = dropon.nextSibling \|\| null;
738		if(nextElement != element) {
739		var oldParentNode = element.parentNode;
740		element.style.visibility = "hidden"; // fix gecko rendering
741		dropon.parentNode.insertBefore(element, nextElement);
742		if(dropon.parentNode!=oldParentNode)
743		Sortable.options(oldParentNode).onChange(element);
744		Sortable.options(dropon.parentNode).onChange(element);
745		}
746		}
747		},
748
749		onEmptyHover: function(element, dropon, overlap) {
750		var oldParentNode = element.parentNode;
751		var droponOptions = Sortable.options(dropon);
752
753		if(!Element.isParent(dropon, element)) {
754		var index;
755
756		var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only});
757		var child = null;
758
759		if(children) {
760		var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
761
762		for (index = 0; index < children.length; index += 1) {
763		if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
764		offset -= Element.offsetSize (children[index], droponOptions.overlap);
765		} else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
766		child = index + 1 < children.length ? children[index + 1] : null;
767		break;
768		} else {
769		child = children[index];
770		break;
771		}
772		}
773		}
774
775		dropon.insertBefore(element, child);
776
777		Sortable.options(oldParentNode).onChange(element);
778		droponOptions.onChange(element);
779		}
780		},
781
782		unmark: function() {
783		if(Sortable._marker) Sortable._marker.hide();
784		},
785
786		mark: function(dropon, position) {
787		// mark on ghosting only
788		var sortable = Sortable.options(dropon.parentNode);
789		if(sortable && !sortable.ghosting) return;
790
791		if(!Sortable._marker) {
792		Sortable._marker =
793		($('dropmarker') \|\| Element.extend(document.createElement('DIV'))).
794		hide().addClassName('dropmarker').setStyle({position:'absolute'});
795		document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
796		}
797		var offsets = Position.cumulativeOffset(dropon);
798		Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'});
799
800		if(position=='after')
801		if(sortable.overlap == 'horizontal')
802		Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'});
803		else
804		Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'});
805
806		Sortable._marker.show();
807		},
808
809		_tree: function(element, options, parent) {
810		var children = Sortable.findElements(element, options) \|\| [];
811
812		for (var i = 0; i < children.length; ++i) {
813		var match = children[i].id.match(options.format);
814
815		if (!match) continue;
816
817		var child = {
818		id: encodeURIComponent(match ? match[1] : null),
819		element: element,
820		parent: parent,
821		children: [],
822		position: parent.children.length,
823		container: $(children[i]).down(options.treeTag)
824		}
825
826		/* Get the element containing the children and recurse over it */
827		if (child.container)
828		this._tree(child.container, options, child)
829
830		parent.children.push (child);
831		}
832
833		return parent;
834		},
835
836		tree: function(element) {
837		element = $(element);
838		var sortableOptions = this.options(element);
839		var options = Object.extend({
840		tag: sortableOptions.tag,
841		treeTag: sortableOptions.treeTag,
842		only: sortableOptions.only,
843		name: element.id,
844		format: sortableOptions.format
845		}, arguments[1] \|\| {});
846
847		var root = {
848		id: null,
849		parent: null,
850		children: [],
851		container: element,
852		position: 0
853		}
854
855		return Sortable._tree(element, options, root);
856		},
857
858		/* Construct a [i] index for a particular node */
859		_constructIndex: function(node) {
860		var index = '';
861		do {
862		if (node.id) index = '[' + node.position + ']' + index;
863		} while ((node = node.parent) != null);
864		return index;
865		},
866
867		sequence: function(element) {
868		element = $(element);
869		var options = Object.extend(this.options(element), arguments[1] \|\| {});
870
871		return $(this.findElements(element, options) \|\| []).map( function(item) {
872		return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
873		});
874		},
875
876		setSequence: function(element, new_sequence) {
877		element = $(element);
878		var options = Object.extend(this.options(element), arguments[2] \|\| {});
879
880		var nodeMap = {};
881		this.findElements(element, options).each( function(n) {
882		if (n.id.match(options.format))
883		nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
884		n.parentNode.removeChild(n);
885		});
886
887		new_sequence.each(function(ident) {
888		var n = nodeMap[ident];
889		if (n) {
890		n[1].appendChild(n[0]);
891		delete nodeMap[ident];
892		}
893		});
894		},
895
896		serialize: function(element) {
897		element = $(element);
898		var options = Object.extend(Sortable.options(element), arguments[1] \|\| {});
899		var name = encodeURIComponent(
900		(arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
901
902		if (options.tree) {
903		return Sortable.tree(element, arguments[1]).children.map( function (item) {
904		return [name + Sortable._constructIndex(item) + "[id]=" +
905		encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
906		}).flatten().join('&');
907		} else {
908		return Sortable.sequence(element, arguments[1]).map( function(item) {
909		return name + "[]=" + encodeURIComponent(item);
910		}).join('&');
911		}
912		}
913		}
914
915		// Returns true if child is contained within element
916		Element.isParent = function(child, element) {
917		if (!child.parentNode \|\| child == element) return false;
918		if (child.parentNode == element) return true;
919		return Element.isParent(child.parentNode, element);
920		}
921
922		Element.findChildren = function(element, only, recursive, tagName) {
923		if(!element.hasChildNodes()) return null;
924		tagName = tagName.toUpperCase();
925		if(only) only = [only].flatten();
926		var elements = [];
927		$A(element.childNodes).each( function(e) {
928		if(e.tagName && e.tagName.toUpperCase()==tagName &&
929		(!only \|\| (Element.classNames(e).detect(function(v) { return only.include(v) }))))
930		elements.push(e);
931		if(recursive) {
932		var grandchildren = Element.findChildren(e, only, recursive, tagName);
933		if(grandchildren) elements.push(grandchildren);
934		}
935		});
936
937		return (elements.length>0 ? elements.flatten() : []);
938		}
939
940		Element.offsetSize = function (element, type) {
941		return element['offset' + ((type=='vertical' \|\| type=='height') ? 'Height' : 'Width')];
942		}
	1	// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
	2	// (c) 2005 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
	3	//
	4	// script.aculo.us is freely distributable under the terms of an MIT-style license.
	5	// For details, see the script.aculo.us web site: http://script.aculo.us/
	6
	7	if(typeof Effect == 'undefined')
	8	throw("dragdrop.js requires including script.aculo.us' effects.js library");
	9
	10	var Droppables = {
	11	drops: [],
	12
	13	remove: function(element) {
	14	this.drops = this.drops.reject(function(d) { return d.element==$(element) });
	15	},
	16
	17	add: function(element) {
	18	element = $(element);
	19	var options = Object.extend({
	20	greedy: true,
	21	hoverclass: null,
	22	tree: false
	23	}, arguments[1] \|\| {});
	24
	25	// cache containers
	26	if(options.containment) {
	27	options._containers = [];
	28	var containment = options.containment;
	29	if((typeof containment == 'object') &&
	30	(containment.constructor == Array)) {
	31	containment.each( function(c) { options._containers.push($(c)) });
	32	} else {
	33	options._containers.push($(containment));
	34	}
	35	}
	36
	37	if(options.accept) options.accept = [options.accept].flatten();
	38
	39	Element.makePositioned(element); // fix IE
	40	options.element = element;
	41
	42	this.drops.push(options);
	43	},
	44
	45	findDeepestChild: function(drops) {
	46	deepest = drops[0];
	47
	48	for (i = 1; i < drops.length; ++i)
	49	if (Element.isParent(drops[i].element, deepest.element))
	50	deepest = drops[i];
	51
	52	return deepest;
	53	},
	54
	55	isContained: function(element, drop) {
	56	var containmentNode;
	57	if(drop.tree) {
	58	containmentNode = element.treeNode;
	59	} else {
	60	containmentNode = element.parentNode;
	61	}
	62	return drop._containers.detect(function(c) { return containmentNode == c });
	63	},
	64
	65	isAffected: function(point, element, drop) {
	66	return (
	67	(drop.element!=element) &&
	68	((!drop._containers) \|\|
	69	this.isContained(element, drop)) &&
	70	((!drop.accept) \|\|
	71	(Element.classNames(element).detect(
	72	function(v) { return drop.accept.include(v) } ) )) &&
	73	Position.within(drop.element, point[0], point[1]) );
	74	},
	75
	76	deactivate: function(drop) {
	77	if(drop.hoverclass)
	78	Element.removeClassName(drop.element, drop.hoverclass);
	79	this.last_active = null;
	80	},
	81
	82	activate: function(drop) {
	83	if(drop.hoverclass)
	84	Element.addClassName(drop.element, drop.hoverclass);
	85	this.last_active = drop;
	86	},
	87
	88	show: function(point, element) {
	89	if(!this.drops.length) return;
	90	var affected = [];
	91
	92	if(this.last_active) this.deactivate(this.last_active);
	93	this.drops.each( function(drop) {
	94	if(Droppables.isAffected(point, element, drop))
	95	affected.push(drop);
	96	});
	97
	98	if(affected.length>0) {
	99	drop = Droppables.findDeepestChild(affected);
	100	Position.within(drop.element, point[0], point[1]);
	101	if(drop.onHover)
	102	drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
	103
	104	Droppables.activate(drop);
	105	}
	106	},
	107
	108	fire: function(event, element) {
	109	if(!this.last_active) return;
	110	Position.prepare();
	111
	112	if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
	113	if (this.last_active.onDrop)
	114	this.last_active.onDrop(element, this.last_active.element, event);
	115	},
	116
	117	reset: function() {
	118	if(this.last_active)
	119	this.deactivate(this.last_active);
	120	}
	121	}
	122
	123	var Draggables = {
	124	drags: [],
	125	observers: [],
	126
	127	register: function(draggable) {
	128	if(this.drags.length == 0) {
	129	this.eventMouseUp = this.endDrag.bindAsEventListener(this);
	130	this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
	131	this.eventKeypress = this.keyPress.bindAsEventListener(this);
	132
	133	Event.observe(document, "mouseup", this.eventMouseUp);
	134	Event.observe(document, "mousemove", this.eventMouseMove);
	135	Event.observe(document, "keypress", this.eventKeypress);
	136	}
	137	this.drags.push(draggable);
	138	},
	139
	140	unregister: function(draggable) {
	141	this.drags = this.drags.reject(function(d) { return d==draggable });
	142	if(this.drags.length == 0) {
	143	Event.stopObserving(document, "mouseup", this.eventMouseUp);
	144	Event.stopObserving(document, "mousemove", this.eventMouseMove);
	145	Event.stopObserving(document, "keypress", this.eventKeypress);
	146	}
	147	},
	148
	149	activate: function(draggable) {
	150	if(draggable.options.delay) {
	151	this._timeout = setTimeout(function() {
	152	Draggables._timeout = null;
	153	window.focus();
	154	Draggables.activeDraggable = draggable;
	155	}.bind(this), draggable.options.delay);
	156	} else {
	157	window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
	158	this.activeDraggable = draggable;
	159	}
	160	},
	161
	162	deactivate: function() {
	163	this.activeDraggable = null;
	164	},
	165
	166	updateDrag: function(event) {
	167	if(!this.activeDraggable) return;
	168	var pointer = [Event.pointerX(event), Event.pointerY(event)];
	169	// Mozilla-based browsers fire successive mousemove events with
	170	// the same coordinates, prevent needless redrawing (moz bug?)
	171	if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
	172	this._lastPointer = pointer;
	173
	174	this.activeDraggable.updateDrag(event, pointer);
	175	},
	176
	177	endDrag: function(event) {
	178	if(this._timeout) {
	179	clearTimeout(this._timeout);
	180	this._timeout = null;
	181	}
	182	if(!this.activeDraggable) return;
	183	this._lastPointer = null;
	184	this.activeDraggable.endDrag(event);
	185	this.activeDraggable = null;
	186	},
	187
	188	keyPress: function(event) {
	189	if(this.activeDraggable)
	190	this.activeDraggable.keyPress(event);
	191	},
	192
	193	addObserver: function(observer) {
	194	this.observers.push(observer);
	195	this._cacheObserverCallbacks();
	196	},
	197
	198	removeObserver: function(element) { // element instead of observer fixes mem leaks
	199	this.observers = this.observers.reject( function(o) { return o.element==element });
	200	this._cacheObserverCallbacks();
	201	},
	202
	203	notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag'
	204	if(this[eventName+'Count'] > 0)
	205	this.observers.each( function(o) {
	206	if(o[eventName]) o[eventName](eventName, draggable, event);
	207	});
	208	if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
	209	},
	210
	211	_cacheObserverCallbacks: function() {
	212	['onStart','onEnd','onDrag'].each( function(eventName) {
	213	Draggables[eventName+'Count'] = Draggables.observers.select(
	214	function(o) { return o[eventName]; }
	215	).length;
	216	});
	217	}
	218	}
	219
	220	/--------------------------------------------------------------------------/
	221
	222	var Draggable = Class.create();
	223	Draggable._dragging = {};
	224
	225	Draggable.prototype = {
	226	initialize: function(element) {
	227	var defaults = {
	228	handle: false,
	229	reverteffect: function(element, top_offset, left_offset) {
	230	var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
	231	new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
	232	queue: {scope:'_draggable', position:'end'}
	233	});
	234	},
	235	endeffect: function(element) {
	236	var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0;
	237	new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
	238	queue: {scope:'_draggable', position:'end'},
	239	afterFinish: function(){
	240	Draggable._dragging[element] = false
	241	}
	242	});
	243	},
	244	zindex: 1000,
	245	revert: false,
	246	scroll: false,
	247	scrollSensitivity: 20,
	248	scrollSpeed: 15,
	249	snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
	250	delay: 0,
	251	boundary: false //false or [ [x,y], [a,b] ]
	252	};
	253
	254	if(!arguments[1] \|\| typeof arguments[1].endeffect == 'undefined')
	255	Object.extend(defaults, {
	256	starteffect: function(element) {
	257	element._opacity = Element.getOpacity(element);
	258	Draggable._dragging[element] = true;
	259	new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
	260	}
	261	});
	262
	263	var options = Object.extend(defaults, arguments[1] \|\| {});
	264
	265	this.element = $(element);
	266
	267	if(options.handle && (typeof options.handle == 'string'))
	268	this.handle = this.element.down('.'+options.handle, 0);
	269
	270	if(!this.handle) this.handle = $(options.handle);
	271	if(!this.handle) this.handle = this.element;
	272
	273	if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
	274	options.scroll = $(options.scroll);
	275	this._isScrollChild = Element.childOf(this.element, options.scroll);
	276	}
	277
	278	Element.makePositioned(this.element); // fix IE
	279
	280	this.delta = this.currentDelta();
	281	this.options =

Rails Trac

Ticket #5071: dragdrop.patch

dragdrop.js