| blob | 88ad3b7c95593c1e715a33e43ef4d3eef3dd8278 |
1 /*
2 Copyright (c) 2006, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
5 version: 0.12.2
6 */
7 (function() {
9 var Event=YAHOO.util.Event;
10 var Dom=YAHOO.util.Dom;
12 /**
13 * Defines the interface and base operation of items that that can be
14 * dragged or can be drop targets. It was designed to be extended, overriding
15 * the event handlers for startDrag, onDrag, onDragOver, onDragOut.
16 * Up to three html elements can be associated with a DragDrop instance:
17 * <ul>
18 * <li>linked element: the element that is passed into the constructor.
19 * This is the element which defines the boundaries for interaction with
20 * other DragDrop objects.</li>
21 * <li>handle element(s): The drag operation only occurs if the element that
22 * was clicked matches a handle element. By default this is the linked
23 * element, but there are times that you will want only a portion of the
24 * linked element to initiate the drag operation, and the setHandleElId()
25 * method provides a way to define this.</li>
26 * <li>drag element: this represents an the element that would be moved along
27 * with the cursor during a drag operation. By default, this is the linked
28 * element itself as in {@link YAHOO.util.DD}. setDragElId() lets you define
29 * a separate element that would be moved, as in {@link YAHOO.util.DDProxy}
30 * </li>
31 * </ul>
32 * This class should not be instantiated until the onload event to ensure that
33 * the associated elements are available.
34 * The following would define a DragDrop obj that would interact with any
35 * other DragDrop obj in the "group1" group:
36 * <pre>
37 * dd = new YAHOO.util.DragDrop("div1", "group1");
38 * </pre>
39 * Since none of the event handlers have been implemented, nothing would
40 * actually happen if you were to run the code above. Normally you would
41 * override this class or one of the default implementations, but you can
42 * also override the methods you want on an instance of the class...
43 * <pre>
44 * dd.onDragDrop = function(e, id) {
45 * alert("dd was dropped on " + id);
46 * }
47 * </pre>
48 * @namespace YAHOO.util
49 * @class DragDrop
50 * @constructor
51 * @param {String} id of the element that is linked to this instance
52 * @param {String} sGroup the group of related DragDrop objects
53 * @param {object} config an object containing configurable attributes
54 * Valid properties for DragDrop:
55 * padding, isTarget, maintainOffset, primaryButtonOnly,
56 */
57 YAHOO.util.DragDrop = function(id, sGroup, config) {
58 if (id) {
59 this.init(id, sGroup, config);
60 }
61 };
63 YAHOO.util.DragDrop.prototype = {
65 /**
66 * The id of the element associated with this object. This is what we
67 * refer to as the "linked element" because the size and position of
68 * this element is used to determine when the drag and drop objects have
69 * interacted.
70 * @property id
71 * @type String
72 */
73 id: null,
75 /**
76 * Configuration attributes passed into the constructor
77 * @property config
78 * @type object
79 */
80 config: null,
82 /**
83 * The id of the element that will be dragged. By default this is same
84 * as the linked element , but could be changed to another element. Ex:
85 * YAHOO.util.DDProxy
86 * @property dragElId
87 * @type String
88 * @private
89 */
90 dragElId: null,
92 /**
93 * the id of the element that initiates the drag operation. By default
94 * this is the linked element, but could be changed to be a child of this
95 * element. This lets us do things like only starting the drag when the
96 * header element within the linked html element is clicked.
97 * @property handleElId
98 * @type String
99 * @private
100 */
101 handleElId: null,
103 /**
104 * An associative array of HTML tags that will be ignored if clicked.
105 * @property invalidHandleTypes
106 * @type {string: string}
107 */
108 invalidHandleTypes: null,
110 /**
111 * An associative array of ids for elements that will be ignored if clicked
112 * @property invalidHandleIds
113 * @type {string: string}
114 */
115 invalidHandleIds: null,
117 /**
118 * An indexted array of css class names for elements that will be ignored
119 * if clicked.
120 * @property invalidHandleClasses
121 * @type string[]
122 */
123 invalidHandleClasses: null,
125 /**
126 * The linked element's absolute X position at the time the drag was
127 * started
128 * @property startPageX
129 * @type int
130 * @private
131 */
132 startPageX: 0,
134 /**
135 * The linked element's absolute X position at the time the drag was
136 * started
137 * @property startPageY
138 * @type int
139 * @private
140 */
141 startPageY: 0,
143 /**
144 * The group defines a logical collection of DragDrop objects that are
145 * related. Instances only get events when interacting with other
146 * DragDrop object in the same group. This lets us define multiple
147 * groups using a single DragDrop subclass if we want.
148 * @property groups
149 * @type {string: string}
150 */
151 groups: null,
153 /**
154 * Individual drag/drop instances can be locked. This will prevent
155 * onmousedown start drag.
156 * @property locked
157 * @type boolean
158 * @private
159 */
160 locked: false,
162 /**
163 * Lock this instance
164 * @method lock
165 */
166 lock: function() { this.locked = true; },
168 /**
169 * Unlock this instace
170 * @method unlock
171 */
172 unlock: function() { this.locked = false; },
174 /**
175 * By default, all insances can be a drop target. This can be disabled by
176 * setting isTarget to false.
177 * @method isTarget
178 * @type boolean
179 */
180 isTarget: true,
182 /**
183 * The padding configured for this drag and drop object for calculating
184 * the drop zone intersection with this object.
185 * @method padding
186 * @type int[]
187 */
188 padding: null,
190 /**
191 * Cached reference to the linked element
192 * @property _domRef
193 * @private
194 */
195 _domRef: null,
197 /**
198 * Internal typeof flag
199 * @property __ygDragDrop
200 * @private
201 */
202 __ygDragDrop: true,
204 /**
205 * Set to true when horizontal contraints are applied
206 * @property constrainX
207 * @type boolean
208 * @private
209 */
210 constrainX: false,
212 /**
213 * Set to true when vertical contraints are applied
214 * @property constrainY
215 * @type boolean
216 * @private
217 */
218 constrainY: false,
220 /**
221 * The left constraint
222 * @property minX
223 * @type int
224 * @private
225 */
226 minX: 0,
228 /**
229 * The right constraint
230 * @property maxX
231 * @type int
232 * @private
233 */
234 maxX: 0,
236 /**
237 * The up constraint
238 * @property minY
239 * @type int
240 * @type int
241 * @private
242 */
243 minY: 0,
245 /**
246 * The down constraint
247 * @property maxY
248 * @type int
249 * @private
250 */
251 maxY: 0,
253 /**
254 * Maintain offsets when we resetconstraints. Set to true when you want
255 * the position of the element relative to its parent to stay the same
256 * when the page changes
257 *
258 * @property maintainOffset
259 * @type boolean
260 */
261 maintainOffset: false,
263 /**
264 * Array of pixel locations the element will snap to if we specified a
265 * horizontal graduation/interval. This array is generated automatically
266 * when you define a tick interval.
267 * @property xTicks
268 * @type int[]
269 */
270 xTicks: null,
272 /**
273 * Array of pixel locations the element will snap to if we specified a
274 * vertical graduation/interval. This array is generated automatically
275 * when you define a tick interval.
276 * @property yTicks
277 * @type int[]
278 */
279 yTicks: null,
281 /**
282 * By default the drag and drop instance will only respond to the primary
283 * button click (left button for a right-handed mouse). Set to true to
284 * allow drag and drop to start with any mouse click that is propogated
285 * by the browser
286 * @property primaryButtonOnly
287 * @type boolean
288 */
289 primaryButtonOnly: true,
291 /**
292 * The availabe property is false until the linked dom element is accessible.
293 * @property available
294 * @type boolean
295 */
296 available: false,
298 /**
299 * By default, drags can only be initiated if the mousedown occurs in the
300 * region the linked element is. This is done in part to work around a
301 * bug in some browsers that mis-report the mousedown if the previous
302 * mouseup happened outside of the window. This property is set to true
303 * if outer handles are defined.
304 *
305 * @property hasOuterHandles
306 * @type boolean
307 * @default false
308 */
309 hasOuterHandles: false,
311 /**
312 * Code that executes immediately before the startDrag event
313 * @method b4StartDrag
314 * @private
315 */
316 b4StartDrag: function(x, y) { },
318 /**
319 * Abstract method called after a drag/drop object is clicked
320 * and the drag or mousedown time thresholds have beeen met.
321 * @method startDrag
322 * @param {int} X click location
323 * @param {int} Y click location
324 */
325 startDrag: function(x, y) { /* override this */ },
327 /**
328 * Code that executes immediately before the onDrag event
329 * @method b4Drag
330 * @private
331 */
332 b4Drag: function(e) { },
334 /**
335 * Abstract method called during the onMouseMove event while dragging an
336 * object.
337 * @method onDrag
338 * @param {Event} e the mousemove event
339 */
340 onDrag: function(e) { /* override this */ },
342 /**
343 * Abstract method called when this element fist begins hovering over
344 * another DragDrop obj
345 * @method onDragEnter
346 * @param {Event} e the mousemove event
347 * @param {String|DragDrop[]} id In POINT mode, the element
348 * id this is hovering over. In INTERSECT mode, an array of one or more
349 * dragdrop items being hovered over.
350 */
351 onDragEnter: function(e, id) { /* override this */ },
353 /**
354 * Code that executes immediately before the onDragOver event
355 * @method b4DragOver
356 * @private
357 */
358 b4DragOver: function(e) { },
360 /**
361 * Abstract method called when this element is hovering over another
362 * DragDrop obj
363 * @method onDragOver
364 * @param {Event} e the mousemove event
365 * @param {String|DragDrop[]} id In POINT mode, the element
366 * id this is hovering over. In INTERSECT mode, an array of dd items
367 * being hovered over.
368 */
369 onDragOver: function(e, id) { /* override this */ },
371 /**
372 * Code that executes immediately before the onDragOut event
373 * @method b4DragOut
374 * @private
375 */
376 b4DragOut: function(e) { },
378 /**
379 * Abstract method called when we are no longer hovering over an element
380 * @method onDragOut
381 * @param {Event} e the mousemove event
382 * @param {String|DragDrop[]} id In POINT mode, the element
383 * id this was hovering over. In INTERSECT mode, an array of dd items
384 * that the mouse is no longer over.
385 */
386 onDragOut: function(e, id) { /* override this */ },
388 /**
389 * Code that executes immediately before the onDragDrop event
390 * @method b4DragDrop
391 * @private
392 */
393 b4DragDrop: function(e) { },
395 /**
396 * Abstract method called when this item is dropped on another DragDrop
397 * obj
398 * @method onDragDrop
399 * @param {Event} e the mouseup event
400 * @param {String|DragDrop[]} id In POINT mode, the element
401 * id this was dropped on. In INTERSECT mode, an array of dd items this
402 * was dropped on.
403 */
404 onDragDrop: function(e, id) { /* override this */ },
406 /**
407 * Abstract method called when this item is dropped on an area with no
408 * drop target
409 * @method onInvalidDrop
410 * @param {Event} e the mouseup event
411 */
412 onInvalidDrop: function(e) { /* override this */ },
414 /**
415 * Code that executes immediately before the endDrag event
416 * @method b4EndDrag
417 * @private
418 */
419 b4EndDrag: function(e) { },
421 /**
422 * Fired when we are done dragging the object
423 * @method endDrag
424 * @param {Event} e the mouseup event
425 */
426 endDrag: function(e) { /* override this */ },
428 /**
429 * Code executed immediately before the onMouseDown event
430 * @method b4MouseDown
431 * @param {Event} e the mousedown event
432 * @private
433 */
434 b4MouseDown: function(e) { },
436 /**
437 * Event handler that fires when a drag/drop obj gets a mousedown
438 * @method onMouseDown
439 * @param {Event} e the mousedown event
440 */
441 onMouseDown: function(e) { /* override this */ },
443 /**
444 * Event handler that fires when a drag/drop obj gets a mouseup
445 * @method onMouseUp
446 * @param {Event} e the mouseup event
447 */
448 onMouseUp: function(e) { /* override this */ },
450 /**
451 * Override the onAvailable method to do what is needed after the initial
452 * position was determined.
453 * @method onAvailable
454 */
455 onAvailable: function () {
456 },
458 /**
459 * Returns a reference to the linked element
460 * @method getEl
461 * @return {HTMLElement} the html element
462 */
463 getEl: function() {
464 if (!this._domRef) {
465 this._domRef = Dom.get(this.id);
466 }
468 return this._domRef;
469 },
471 /**
472 * Returns a reference to the actual element to drag. By default this is
473 * the same as the html element, but it can be assigned to another
474 * element. An example of this can be found in YAHOO.util.DDProxy
475 * @method getDragEl
476 * @return {HTMLElement} the html element
477 */
478 getDragEl: function() {
479 return Dom.get(this.dragElId);
480 },
482 /**
483 * Sets up the DragDrop object. Must be called in the constructor of any
484 * YAHOO.util.DragDrop subclass
485 * @method init
486 * @param id the id of the linked element
487 * @param {String} sGroup the group of related items
488 * @param {object} config configuration attributes
489 */
490 init: function(id, sGroup, config) {
491 this.initTarget(id, sGroup, config);
492 Event.on(this.id, "mousedown", this.handleMouseDown, this, true);
493 // Event.on(this.id, "selectstart", Event.preventDefault);
494 },
496 /**
497 * Initializes Targeting functionality only... the object does not
498 * get a mousedown handler.
499 * @method initTarget
500 * @param id the id of the linked element
501 * @param {String} sGroup the group of related items
502 * @param {object} config configuration attributes
503 */
504 initTarget: function(id, sGroup, config) {
506 // configuration attributes
507 this.config = config || {};
509 // create a local reference to the drag and drop manager
510 this.DDM = YAHOO.util.DDM;
511 // initialize the groups array
512 this.groups = {};
514 // assume that we have an element reference instead of an id if the
515 // parameter is not a string
516 if (typeof id !== "string") {
517 YAHOO.log("id is not a string, assuming it is an HTMLElement");
518 id = Dom.generateId(id);
519 }
521 // set the id
522 this.id = id;
524 // add to an interaction group
525 this.addToGroup((sGroup) ? sGroup : "default");
527 // We don't want to register this as the handle with the manager
528 // so we just set the id rather than calling the setter.
529 this.handleElId = id;
531 Event.onAvailable(id, this.handleOnAvailable, this, true);
534 // the linked element is the element that gets dragged by default
535 this.setDragElId(id);
537 // by default, clicked anchors will not start drag operations.
538 // @TODO what else should be here? Probably form fields.
539 this.invalidHandleTypes = { A: "A" };
540 this.invalidHandleIds = {};
541 this.invalidHandleClasses = [];
543 this.applyConfig();
544 },
546 /**
547 * Applies the configuration parameters that were passed into the constructor.
548 * This is supposed to happen at each level through the inheritance chain. So
549 * a DDProxy implentation will execute apply config on DDProxy, DD, and
550 * DragDrop in order to get all of the parameters that are available in
551 * each object.
552 * @method applyConfig
553 */
554 applyConfig: function() {
556 // configurable properties:
557 // padding, isTarget, maintainOffset, primaryButtonOnly
558 this.padding = this.config.padding || [0, 0, 0, 0];
559 this.isTarget = (this.config.isTarget !== false);
560 this.maintainOffset = (this.config.maintainOffset);
561 this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
563 },
565 /**
566 * Executed when the linked element is available
567 * @method handleOnAvailable
568 * @private
569 */
570 handleOnAvailable: function() {
571 this.available = true;
572 this.resetConstraints();
573 this.onAvailable();
574 },
576 /**
577 * Configures the padding for the target zone in px. Effectively expands
578 * (or reduces) the virtual object size for targeting calculations.
579 * Supports css-style shorthand; if only one parameter is passed, all sides
580 * will have that padding, and if only two are passed, the top and bottom
581 * will have the first param, the left and right the second.
582 * @method setPadding
583 * @param {int} iTop Top pad
584 * @param {int} iRight Right pad
585 * @param {int} iBot Bot pad
586 * @param {int} iLeft Left pad
587 */
588 setPadding: function(iTop, iRight, iBot, iLeft) {
589 // this.padding = [iLeft, iRight, iTop, iBot];
590 if (!iRight && 0 !== iRight) {
591 this.padding = [iTop, iTop, iTop, iTop];
592 } else if (!iBot && 0 !== iBot) {
593 this.padding = [iTop, iRight, iTop, iRight];
594 } else {
595 this.padding = [iTop, iRight, iBot, iLeft];
596 }
597 },
599 /**
600 * Stores the initial placement of the linked element.
601 * @method setInitialPosition
602 * @param {int} diffX the X offset, default 0
603 * @param {int} diffY the Y offset, default 0
604 */
605 setInitPosition: function(diffX, diffY) {
606 var el = this.getEl();
608 if (!this.DDM.verifyEl(el)) {
609 return;
610 }
612 var dx = diffX || 0;
613 var dy = diffY || 0;
615 var p = Dom.getXY( el );
617 this.initPageX = p[0] - dx;
618 this.initPageY = p[1] - dy;
620 this.lastPageX = p[0];
621 this.lastPageY = p[1];
624 this.setStartPosition(p);
625 },
627 /**
628 * Sets the start position of the element. This is set when the obj
629 * is initialized, the reset when a drag is started.
630 * @method setStartPosition
631 * @param pos current position (from previous lookup)
632 * @private
633 */
634 setStartPosition: function(pos) {
635 var p = pos || Dom.getXY( this.getEl() );
637 this.deltaSetXY = null;
639 this.startPageX = p[0];
640 this.startPageY = p[1];
641 },
643 /**
644 * Add this instance to a group of related drag/drop objects. All
645 * instances belong to at least one group, and can belong to as many
646 * groups as needed.
647 * @method addToGroup
648 * @param sGroup {string} the name of the group
649 */
650 addToGroup: function(sGroup) {
651 this.groups[sGroup] = true;
652 this.DDM.regDragDrop(this, sGroup);
653 },
655 /**
656 * Remove's this instance from the supplied interaction group
657 * @method removeFromGroup
658 * @param {string} sGroup The group to drop
659 */
660 removeFromGroup: function(sGroup) {
661 if (this.groups[sGroup]) {
662 delete this.groups[sGroup];
663 }
665 this.DDM.removeDDFromGroup(this, sGroup);
666 },
668 /**
669 * Allows you to specify that an element other than the linked element
670 * will be moved with the cursor during a drag
671 * @method setDragElId
672 * @param id {string} the id of the element that will be used to initiate the drag
673 */
674 setDragElId: function(id) {
675 this.dragElId = id;
676 },
678 /**
679 * Allows you to specify a child of the linked element that should be
680 * used to initiate the drag operation. An example of this would be if
681 * you have a content div with text and links. Clicking anywhere in the
682 * content area would normally start the drag operation. Use this method
683 * to specify that an element inside of the content div is the element
684 * that starts the drag operation.
685 * @method setHandleElId
686 * @param id {string} the id of the element that will be used to
687 * initiate the drag.
688 */
689 setHandleElId: function(id) {
690 if (typeof id !== "string") {
691 YAHOO.log("id is not a string, assuming it is an HTMLElement");
692 id = Dom.generateId(id);
693 }
694 this.handleElId = id;
695 this.DDM.regHandle(this.id, id);
696 },
698 /**
699 * Allows you to set an element outside of the linked element as a drag
700 * handle
701 * @method setOuterHandleElId
702 * @param id the id of the element that will be used to initiate the drag
703 */
704 setOuterHandleElId: function(id) {
705 if (typeof id !== "string") {
706 YAHOO.log("id is not a string, assuming it is an HTMLElement");
707 id = Dom.generateId(id);
708 }
709 Event.on(id, "mousedown",
710 this.handleMouseDown, this, true);
711 this.setHandleElId(id);
713 this.hasOuterHandles = true;
714 },
716 /**
717 * Remove all drag and drop hooks for this element
718 * @method unreg
719 */
720 unreg: function() {
721 Event.removeListener(this.id, "mousedown",
722 this.handleMouseDown);
723 this._domRef = null;
724 this.DDM._remove(this);
725 },
727 /**
728 * Returns true if this instance is locked, or the drag drop mgr is locked
729 * (meaning that all drag/drop is disabled on the page.)
730 * @method isLocked
731 * @return {boolean} true if this obj or all drag/drop is locked, else
732 * false
733 */
734 isLocked: function() {
735 return (this.DDM.isLocked() || this.locked);
736 },
738 /**
739 * Fired when this object is clicked
740 * @method handleMouseDown
741 * @param {Event} e
742 * @param {YAHOO.util.DragDrop} oDD the clicked dd object (this dd obj)
743 * @private
744 */
745 handleMouseDown: function(e, oDD) {
747 var button = e.which || e.button;
749 if (this.primaryButtonOnly && button > 1) {
750 return;
751 }
753 if (this.isLocked()) {
754 return;
755 }
757 this.DDM.refreshCache(this.groups);
758 // var self = this;
759 // setTimeout( function() { self.DDM.refreshCache(self.groups); }, 0);
761 // Only process the event if we really clicked within the linked
762 // element. The reason we make this check is that in the case that
763 // another element was moved between the clicked element and the
764 // cursor in the time between the mousedown and mouseup events. When
765 // this happens, the element gets the next mousedown event
766 // regardless of where on the screen it happened.
767 var pt = new YAHOO.util.Point(Event.getPageX(e), Event.getPageY(e));
768 if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
769 } else {
770 if (this.clickValidator(e)) {
773 // set the initial element position
774 this.setStartPosition();
777 this.b4MouseDown(e);
778 this.onMouseDown(e);
779 this.DDM.handleMouseDown(e, this);
781 this.DDM.stopEvent(e);
782 } else {
785 }
786 }
787 },
789 clickValidator: function(e) {
790 var target = Event.getTarget(e);
791 return ( this.isValidHandleChild(target) &&
792 (this.id == this.handleElId ||
793 this.DDM.handleWasClicked(target, this.id)) );
794 },
796 /**
797 * Allows you to specify a tag name that should not start a drag operation
798 * when clicked. This is designed to facilitate embedding links within a
799 * drag handle that do something other than start the drag.
800 * @method addInvalidHandleType
801 * @param {string} tagName the type of element to exclude
802 */
803 addInvalidHandleType: function(tagName) {
804 var type = tagName.toUpperCase();
805 this.invalidHandleTypes[type] = type;
806 },
808 /**
809 * Lets you to specify an element id for a child of a drag handle
810 * that should not initiate a drag
811 * @method addInvalidHandleId
812 * @param {string} id the element id of the element you wish to ignore
813 */
814 addInvalidHandleId: function(id) {
815 if (typeof id !== "string") {
816 YAHOO.log("id is not a string, assuming it is an HTMLElement");
817 id = Dom.generateId(id);
818 }
819 this.invalidHandleIds[id] = id;
820 },
822 /**
823 * Lets you specify a css class of elements that will not initiate a drag
824 * @method addInvalidHandleClass
825 * @param {string} cssClass the class of the elements you wish to ignore
826 */
827 addInvalidHandleClass: function(cssClass) {
828 this.invalidHandleClasses.push(cssClass);
829 },
831 /**
832 * Unsets an excluded tag name set by addInvalidHandleType
833 * @method removeInvalidHandleType
834 * @param {string} tagName the type of element to unexclude
835 */
836 removeInvalidHandleType: function(tagName) {
837 var type = tagName.toUpperCase();
838 // this.invalidHandleTypes[type] = null;
839 delete this.invalidHandleTypes[type];
840 },
842 /**
843 * Unsets an invalid handle id
844 * @method removeInvalidHandleId
845 * @param {string} id the id of the element to re-enable
846 */
847 removeInvalidHandleId: function(id) {
848 if (typeof id !== "string") {
849 YAHOO.log("id is not a string, assuming it is an HTMLElement");
850 id = Dom.generateId(id);
851 }
852 delete this.invalidHandleIds[id];
853 },
855 /**
856 * Unsets an invalid css class
857 * @method removeInvalidHandleClass
858 * @param {string} cssClass the class of the element(s) you wish to
859 * re-enable
860 */
861 removeInvalidHandleClass: function(cssClass) {
862 for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
863 if (this.invalidHandleClasses[i] == cssClass) {
864 delete this.invalidHandleClasses[i];
865 }
866 }
867 },
869 /**
870 * Checks the tag exclusion list to see if this click should be ignored
871 * @method isValidHandleChild
872 * @param {HTMLElement} node the HTMLElement to evaluate
873 * @return {boolean} true if this is a valid tag type, false if not
874 */
875 isValidHandleChild: function(node) {
877 var valid = true;
878 // var n = (node.nodeName == "#text") ? node.parentNode : node;
879 var nodeName;
880 try {
881 nodeName = node.nodeName.toUpperCase();
882 } catch(e) {
883 nodeName = node.nodeName;
884 }
885 valid = valid && !this.invalidHandleTypes[nodeName];
886 valid = valid && !this.invalidHandleIds[node.id];
888 for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
889 valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
890 }
893 return valid;
895 },
897 /**
898 * Create the array of horizontal tick marks if an interval was specified
899 * in setXConstraint().
900 * @method setXTicks
901 * @private
902 */
903 setXTicks: function(iStartX, iTickSize) {
904 this.xTicks = [];
905 this.xTickSize = iTickSize;
907 var tickMap = {};
909 for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
910 if (!tickMap[i]) {
911 this.xTicks[this.xTicks.length] = i;
912 tickMap[i] = true;
913 }
914 }
916 for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
917 if (!tickMap[i]) {
918 this.xTicks[this.xTicks.length] = i;
919 tickMap[i] = true;
920 }
921 }
923 this.xTicks.sort(this.DDM.numericSort) ;
924 },
926 /**
927 * Create the array of vertical tick marks if an interval was specified in
928 * setYConstraint().
929 * @method setYTicks
930 * @private
931 */
932 setYTicks: function(iStartY, iTickSize) {
933 this.yTicks = [];
934 this.yTickSize = iTickSize;
936 var tickMap = {};
938 for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
939 if (!tickMap[i]) {
940 this.yTicks[this.yTicks.length] = i;
941 tickMap[i] = true;
942 }
943 }
945 for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
946 if (!tickMap[i]) {
947 this.yTicks[this.yTicks.length] = i;
948 tickMap[i] = true;
949 }
950 }
952 this.yTicks.sort(this.DDM.numericSort) ;
953 },
955 /**
956 * By default, the element can be dragged any place on the screen. Use
957 * this method to limit the horizontal travel of the element. Pass in
958 * 0,0 for the parameters if you want to lock the drag to the y axis.
959 * @method setXConstraint
960 * @param {int} iLeft the number of pixels the element can move to the left
961 * @param {int} iRight the number of pixels the element can move to the
962 * right
963 * @param {int} iTickSize optional parameter for specifying that the
964 * element
965 * should move iTickSize pixels at a time.
966 */
967 setXConstraint: function(iLeft, iRight, iTickSize) {
968 this.leftConstraint = iLeft;
969 this.rightConstraint = iRight;
971 this.minX = this.initPageX - iLeft;
972 this.maxX = this.initPageX + iRight;
973 if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
975 this.constrainX = true;
976 },
978 /**
979 * Clears any constraints applied to this instance. Also clears ticks
980 * since they can't exist independent of a constraint at this time.
981 * @method clearConstraints
982 */
983 clearConstraints: function() {
984 this.constrainX = false;
985 this.constrainY = false;
986 this.clearTicks();
987 },
989 /**
990 * Clears any tick interval defined for this instance
991 * @method clearTicks
992 */
993 clearTicks: function() {
994 this.xTicks = null;
995 this.yTicks = null;
996 this.xTickSize = 0;
997 this.yTickSize = 0;
998 },
1000 /**
1001 * By default, the element can be dragged any place on the screen. Set
1002 * this to limit the vertical travel of the element. Pass in 0,0 for the
1003 * parameters if you want to lock the drag to the x axis.
1004 * @method setYConstraint
1005 * @param {int} iUp the number of pixels the element can move up
1006 * @param {int} iDown the number of pixels the element can move down
1007 * @param {int} iTickSize optional parameter for specifying that the
1008 * element should move iTickSize pixels at a time.
1009 */
1010 setYConstraint: function(iUp, iDown, iTickSize) {
1011 this.topConstraint = iUp;
1012 this.bottomConstraint = iDown;
1014 this.minY = this.initPageY - iUp;
1015 this.maxY = this.initPageY + iDown;
1016 if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
1018 this.constrainY = true;
1020 },
1022 /**
1023 * resetConstraints must be called if you manually reposition a dd element.
1024 * @method resetConstraints
1025 * @param {boolean} maintainOffset
1026 */
1027 resetConstraints: function() {
1030 // Maintain offsets if necessary
1031 if (this.initPageX || this.initPageX === 0) {
1032 // figure out how much this thing has moved
1033 var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
1034 var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
1036 this.setInitPosition(dx, dy);
1038 // This is the first time we have detected the element's position
1039 } else {
1040 this.setInitPosition();
1041 }
1043 if (this.constrainX) {
1044 this.setXConstraint( this.leftConstraint,
1045 this.rightConstraint,
1046 this.xTickSize );
1047 }
1049 if (this.constrainY) {
1050 this.setYConstraint( this.topConstraint,
1051 this.bottomConstraint,
1052 this.yTickSize );
1053 }
1054 },
1056 /**
1057 * Normally the drag element is moved pixel by pixel, but we can specify
1058 * that it move a number of pixels at a time. This method resolves the
1059 * location when we have it set up like this.
1060 * @method getTick
1061 * @param {int} val where we want to place the object
1062 * @param {int[]} tickArray sorted array of valid points
1063 * @return {int} the closest tick
1064 * @private
1065 */
1066 getTick: function(val, tickArray) {
1068 if (!tickArray) {
1069 // If tick interval is not defined, it is effectively 1 pixel,
1070 // so we return the value passed to us.
1071 return val;
1072 } else if (tickArray[0] >= val) {
1073 // The value is lower than the first tick, so we return the first
1074 // tick.
1075 return tickArray[0];
1076 } else {
1077 for (var i=0, len=tickArray.length; i<len; ++i) {
1078 var next = i + 1;
1079 if (tickArray[next] && tickArray[next] >= val) {
1080 var diff1 = val - tickArray[i];
1081 var diff2 = tickArray[next] - val;
1082 return (diff2 > diff1) ? tickArray[i] : tickArray[next];
1083 }
1084 }
1086 // The value is larger than the last tick, so we return the last
1087 // tick.
1088 return tickArray[tickArray.length - 1];
1089 }
1090 },
1092 /**
1093 * toString method
1094 * @method toString
1095 * @return {string} string representation of the dd obj
1096 */
1097 toString: function() {
1098 return ("DragDrop " + this.id);
1099 }
1101 };
1103 })();
1104 /**
1105 * The drag and drop utility provides a framework for building drag and drop
1106 * applications. In addition to enabling drag and drop for specific elements,
1107 * the drag and drop elements are tracked by the manager class, and the
1108 * interactions between the various elements are tracked during the drag and
1109 * the implementing code is notified about these important moments.
1110 * @module dragdrop
1111 * @title Drag and Drop
1112 * @requires yahoo,dom,event
1113 * @namespace YAHOO.util
1114 */
1116 // Only load the library once. Rewriting the manager class would orphan
1117 // existing drag and drop instances.
1118 if (!YAHOO.util.DragDropMgr) {
1120 /**
1121 * DragDropMgr is a singleton that tracks the element interaction for
1122 * all DragDrop items in the window. Generally, you will not call
1123 * this class directly, but it does have helper methods that could
1124 * be useful in your DragDrop implementations.
1125 * @class DragDropMgr
1126 * @static
1127 */
1128 YAHOO.util.DragDropMgr = function() {
1130 var Event = YAHOO.util.Event;
1132 return {
1134 /**
1135 * Two dimensional Array of registered DragDrop objects. The first
1136 * dimension is the DragDrop item group, the second the DragDrop
1137 * object.
1138 * @property ids
1139 * @type {string: string}
1140 * @private
1141 * @static
1142 */
1143 ids: {},
1145 /**
1146 * Array of element ids defined as drag handles. Used to determine
1147 * if the element that generated the mousedown event is actually the
1148 * handle and not the html element itself.
1149 * @property handleIds
1150 * @type {string: string}
1151 * @private
1152 * @static
1153 */
1154 handleIds: {},
1156 /**
1157 * the DragDrop object that is currently being dragged
1158 * @property dragCurrent
1159 * @type DragDrop
1160 * @private
1161 * @static
1162 **/
1163 dragCurrent: null,
1165 /**
1166 * the DragDrop object(s) that are being hovered over
1167 * @property dragOvers
1168 * @type Array
1169 * @private
1170 * @static
1171 */
1172 dragOvers: {},
1174 /**
1175 * the X distance between the cursor and the object being dragged
1176 * @property deltaX
1177 * @type int
1178 * @private
1179 * @static
1180 */
1181 deltaX: 0,
1183 /**
1184 * the Y distance between the cursor and the object being dragged
1185 * @property deltaY
1186 * @type int
1187 * @private
1188 * @static
1189 */
1190 deltaY: 0,
1192 /**
1193 * Flag to determine if we should prevent the default behavior of the
1194 * events we define. By default this is true, but this can be set to
1195 * false if you need the default behavior (not recommended)
1196 * @property preventDefault
1197 * @type boolean
1198 * @static
1199 */
1200 preventDefault: true,
1202 /**
1203 * Flag to determine if we should stop the propagation of the events
1204 * we generate. This is true by default but you may want to set it to
1205 * false if the html element contains other features that require the
1206 * mouse click.
1207 * @property stopPropagation
1208 * @type boolean
1209 * @static
1210 */
1211 stopPropagation: true,
1213 /**
1214 * Internal flag that is set to true when drag and drop has been
1215 * intialized
1216 * @property initialized
1217 * @private
1218 * @static
1219 */
1220 initalized: false,
1222 /**
1223 * All drag and drop can be disabled.
1224 * @property locked
1225 * @private
1226 * @static
1227 */
1228 locked: false,
1230 /**
1231 * Called the first time an element is registered.
1232 * @method init
1233 * @private
1234 * @static
1235 */
1236 init: function() {
1237 this.initialized = true;
1238 },
1240 /**
1241 * In point mode, drag and drop interaction is defined by the
1242 * location of the cursor during the drag/drop
1243 * @property POINT
1244 * @type int
1245 * @static
1246 * @final
1247 */
1248 POINT: 0,
1250 /**
1251 * In intersect mode, drag and drop interaction is defined by the
1252 * cursor position or the amount of overlap of two or more drag and
1253 * drop objects.
1254 * @property INTERSECT
1255 * @type int
1256 * @static
1257 * @final
1258 */
1259 INTERSECT: 1,
1261 /**
1262 * In intersect mode, drag and drop interaction is defined only by the
1263 * overlap of two or more drag and drop objects.
1264 * @property STRICT_INTERSECT
1265 * @type int
1266 * @static
1267 * @final
1268 */
1269 STRICT_INTERSECT: 2,
1271 /**
1272 * The current drag and drop mode. Default: POINT
1273 * @property mode
1274 * @type int
1275 * @static
1276 */
1277 mode: 0,
1279 /**
1280 * Runs method on all drag and drop objects
1281 * @method _execOnAll
1282 * @private
1283 * @static
1284 */
1285 _execOnAll: function(sMethod, args) {
1286 for (var i in this.ids) {
1287 for (var j in this.ids[i]) {
1288 var oDD = this.ids[i][j];
1289 if (! this.isTypeOfDD(oDD)) {
1290 continue;
1291 }
1292 oDD[sMethod].apply(oDD, args);
1293 }
1294 }
1295 },
1297 /**
1298 * Drag and drop initialization. Sets up the global event handlers
1299 * @method _onLoad
1300 * @private
1301 * @static
1302 */
1303 _onLoad: function() {
1305 this.init();
1308 Event.on(document, "mouseup", this.handleMouseUp, this, true);
1309 Event.on(document, "mousemove", this.handleMouseMove, this, true);
1310 Event.on(window, "unload", this._onUnload, this, true);
1311 Event.on(window, "resize", this._onResize, this, true);
1312 // Event.on(window, "mouseout", this._test);
1314 },
1316 /**
1317 * Reset constraints on all drag and drop objs
1318 * @method _onResize
1319 * @private
1320 * @static
1321 */
1322 _onResize: function(e) {
1323 this._execOnAll("resetConstraints", []);
1324 },
1326 /**
1327 * Lock all drag and drop functionality
1328 * @method lock
1329 * @static
1330 */
1331 lock: function() { this.locked = true; },
1333 /**
1334 * Unlock all drag and drop functionality
1335 * @method unlock
1336 * @static
1337 */
1338 unlock: function() { this.locked = false; },
1340 /**
1341 * Is drag and drop locked?
1342 * @method isLocked
1343 * @return {boolean} True if drag and drop is locked, false otherwise.
1344 * @static
1345 */
1346 isLocked: function() { return this.locked; },
1348 /**
1349 * Location cache that is set for all drag drop objects when a drag is
1350 * initiated, cleared when the drag is finished.
1351 * @property locationCache
1352 * @private
1353 * @static
1354 */
1355 locationCache: {},
1357 /**
1358 * Set useCache to false if you want to force object the lookup of each
1359 * drag and drop linked element constantly during a drag.
1360 * @property useCache
1361 * @type boolean
1362 * @static
1363 */
1364 useCache: true,
1366 /**
1367 * The number of pixels that the mouse needs to move after the
1368 * mousedown before the drag is initiated. Default=3;
1369 * @property clickPixelThresh
1370 * @type int
1371 * @static
1372 */
1373 clickPixelThresh: 3,
1375 /**
1376 * The number of milliseconds after the mousedown event to initiate the
1377 * drag if we don't get a mouseup event. Default=1000
1378 * @property clickTimeThresh
1379 * @type int
1380 * @static
1381 */
1382 clickTimeThresh: 1000,
1384 /**
1385 * Flag that indicates that either the drag pixel threshold or the
1386 * mousdown time threshold has been met
1387 * @property dragThreshMet
1388 * @type boolean
1389 * @private
1390 * @static
1391 */
1392 dragThreshMet: false,
1394 /**
1395 * Timeout used for the click time threshold
1396 * @property clickTimeout
1397 * @type Object
1398 * @private
1399 * @static
1400 */
1401 clickTimeout: null,
1403 /**
1404 * The X position of the mousedown event stored for later use when a
1405 * drag threshold is met.
1406 * @property startX
1407 * @type int
1408 * @private
1409 * @static
1410 */
1411 startX: 0,
1413 /**
1414 * The Y position of the mousedown event stored for later use when a
1415 * drag threshold is met.
1416 * @property startY
1417 * @type int
1418 * @private
1419 * @static
1420 */
1421 startY: 0,
1423 /**
1424 * Each DragDrop instance must be registered with the DragDropMgr.
1425 * This is executed in DragDrop.init()
1426 * @method regDragDrop
1427 * @param {DragDrop} oDD the DragDrop object to register
1428 * @param {String} sGroup the name of the group this element belongs to
1429 * @static
1430 */
1431 regDragDrop: function(oDD, sGroup) {
1432 if (!this.initialized) { this.init(); }
1434 if (!this.ids[sGroup]) {
1435 this.ids[sGroup] = {};
1436 }
1437 this.ids[sGroup][oDD.id] = oDD;
1438 },
1440 /**
1441 * Removes the supplied dd instance from the supplied group. Executed
1442 * by DragDrop.removeFromGroup, so don't call this function directly.
1443 * @method removeDDFromGroup
1444 * @private
1445 * @static
1446 */
1447 removeDDFromGroup: function(oDD, sGroup) {
1448 if (!this.ids[sGroup]) {
1449 this.ids[sGroup] = {};
1450 }
1452 var obj = this.ids[sGroup];
1453 if (obj && obj[oDD.id]) {
1454 delete obj[oDD.id];
1455 }
1456 },
1458 /**
1459 * Unregisters a drag and drop item. This is executed in
1460 * DragDrop.unreg, use that method instead of calling this directly.
1461 * @method _remove
1462 * @private
1463 * @static
1464 */
1465 _remove: function(oDD) {
1466 for (var g in oDD.groups) {
1467 if (g && this.ids[g][oDD.id]) {
1468 delete this.ids[g][oDD.id];
1469 }
1470 }
1471 delete this.handleIds[oDD.id];
1472 },
1474 /**
1475 * Each DragDrop handle element must be registered. This is done
1476 * automatically when executing DragDrop.setHandleElId()
1477 * @method regHandle
1478 * @param {String} sDDId the DragDrop id this element is a handle for
1479 * @param {String} sHandleId the id of the element that is the drag
1480 * handle
1481 * @static
1482 */
1483 regHandle: function(sDDId, sHandleId) {
1484 if (!this.handleIds[sDDId]) {
1485 this.handleIds[sDDId] = {};
1486 }
1487 this.handleIds[sDDId][sHandleId] = sHandleId;
1488 },
1490 /**
1491 * Utility function to determine if a given element has been
1492 * registered as a drag drop item.
1493 * @method isDragDrop
1494 * @param {String} id the element id to check
1495 * @return {boolean} true if this element is a DragDrop item,
1496 * false otherwise
1497 * @static
1498 */
1499 isDragDrop: function(id) {
1500 return ( this.getDDById(id) ) ? true : false;
1501 },
1503 /**
1504 * Returns the drag and drop instances that are in all groups the
1505 * passed in instance belongs to.
1506 * @method getRelated
1507 * @param {DragDrop} p_oDD the obj to get related data for
1508 * @param {boolean} bTargetsOnly if true, only return targetable objs
1509 * @return {DragDrop[]} the related instances
1510 * @static
1511 */
1512 getRelated: function(p_oDD, bTargetsOnly) {
1513 var oDDs = [];
1514 for (var i in p_oDD.groups) {
1515 for (j in this.ids[i]) {
1516 var dd = this.ids[i][j];
1517 if (! this.isTypeOfDD(dd)) {
1518 continue;
1519 }
1520 if (!bTargetsOnly || dd.isTarget) {
1521 oDDs[oDDs.length] = dd;
1522 }
1523 }
1524 }
1526 return oDDs;
1527 },
1529 /**
1530 * Returns true if the specified dd target is a legal target for
1531 * the specifice drag obj
1532 * @method isLegalTarget
1533 * @param {DragDrop} the drag obj
1534 * @param {DragDrop} the target
1535 * @return {boolean} true if the target is a legal target for the
1536 * dd obj
1537 * @static
1538 */
1539 isLegalTarget: function (oDD, oTargetDD) {
1540 var targets = this.getRelated(oDD, true);
1541 for (var i=0, len=targets.length;i<len;++i) {
1542 if (targets[i].id == oTargetDD.id) {
1543 return true;
1544 }
1545 }
1547 return false;
1548 },
1550 /**
1551 * My goal is to be able to transparently determine if an object is
1552 * typeof DragDrop, and the exact subclass of DragDrop. typeof
1553 * returns "object", oDD.constructor.toString() always returns
1554 * "DragDrop" and not the name of the subclass. So for now it just
1555 * evaluates a well-known variable in DragDrop.
1556 * @method isTypeOfDD
1557 * @param {Object} the object to evaluate
1558 * @return {boolean} true if typeof oDD = DragDrop
1559 * @static
1560 */
1561 isTypeOfDD: function (oDD) {
1562 return (oDD && oDD.__ygDragDrop);
1563 },
1565 /**
1566 * Utility function to determine if a given element has been
1567 * registered as a drag drop handle for the given Drag Drop object.
1568 * @method isHandle
1569 * @param {String} id the element id to check
1570 * @return {boolean} true if this element is a DragDrop handle, false
1571 * otherwise
1572 * @static
1573 */
1574 isHandle: function(sDDId, sHandleId) {
1575 return ( this.handleIds[sDDId] &&
1576 this.handleIds[sDDId][sHandleId] );
1577 },
1579 /**
1580 * Returns the DragDrop instance for a given id
1581 * @method getDDById
1582 * @param {String} id the id of the DragDrop object
1583 * @return {DragDrop} the drag drop object, null if it is not found
1584 * @static
1585 */
1586 getDDById: function(id) {
1587 for (var i in this.ids) {
1588 if (this.ids[i][id]) {
1589 return this.ids[i][id];
1590 }
1591 }
1592 return null;
1593 },
1595 /**
1596 * Fired after a registered DragDrop object gets the mousedown event.
1597 * Sets up the events required to track the object being dragged
1598 * @method handleMouseDown
1599 * @param {Event} e the event
1600 * @param oDD the DragDrop object being dragged
1601 * @private
1602 * @static
1603 */
1604 handleMouseDown: function(e, oDD) {
1606 this.currentTarget = YAHOO.util.Event.getTarget(e);
1608 this.dragCurrent = oDD;
1610 var el = oDD.getEl();
1612 // track start position
1613 this.startX = YAHOO.util.Event.getPageX(e);
1614 this.startY = YAHOO.util.Event.getPageY(e);
1616 this.deltaX = this.startX - el.offsetLeft;
1617 this.deltaY = this.startY - el.offsetTop;
1619 this.dragThreshMet = false;
1621 this.clickTimeout = setTimeout(
1622 function() {
1623 var DDM = YAHOO.util.DDM;
1624 DDM.startDrag(DDM.startX, DDM.startY);
1625 },
1626 this.clickTimeThresh );
1627 },
1629 /**
1630 * Fired when either the drag pixel threshol or the mousedown hold
1631 * time threshold has been met.
1632 * @method startDrag
1633 * @param x {int} the X position of the original mousedown
1634 * @param y {int} the Y position of the original mousedown
1635 * @static
1636 */
1637 startDrag: function(x, y) {
1638 clearTimeout(this.clickTimeout);
1639 if (this.dragCurrent) {
1640 this.dragCurrent.b4StartDrag(x, y);
1641 this.dragCurrent.startDrag(x, y);
1642 }
1643 this.dragThreshMet = true;
1644 },
1646 /**
1647 * Internal function to handle the mouseup event. Will be invoked
1648 * from the context of the document.
1649 * @method handleMouseUp
1650 * @param {Event} e the event
1651 * @private
1652 * @static
1653 */
1654 handleMouseUp: function(e) {
1656 if (! this.dragCurrent) {
1657 return;
1658 }
1660 clearTimeout(this.clickTimeout);
1662 if (this.dragThreshMet) {
1663 this.fireEvents(e, true);
1664 } else {
1665 }
1667 this.stopDrag(e);
1669 this.stopEvent(e);
1670 },
1672 /**
1673 * Utility to stop event propagation and event default, if these
1674 * features are turned on.
1675 * @method stopEvent
1676 * @param {Event} e the event as returned by this.getEvent()
1677 * @static
1678 */
1679 stopEvent: function(e) {
1680 if (this.stopPropagation) {
1681 YAHOO.util.Event.stopPropagation(e);
1682 }
1684 if (this.preventDefault) {
1685 YAHOO.util.Event.preventDefault(e);
1686 }
1687 },
1689 /**
1690 * Internal function to clean up event handlers after the drag
1691 * operation is complete
1692 * @method stopDrag
1693 * @param {Event} e the event
1694 * @private
1695 * @static
1696 */
1697 stopDrag: function(e) {
1699 // Fire the drag end event for the item that was dragged
1700 if (this.dragCurrent) {
1701 if (this.dragThreshMet) {
1702 this.dragCurrent.b4EndDrag(e);
1703 this.dragCurrent.endDrag(e);
1704 }
1706 this.dragCurrent.onMouseUp(e);
1707 }
1709 this.dragCurrent = null;
1710 this.dragOvers = {};
1711 },
1713 /**
1714 * Internal function to handle the mousemove event. Will be invoked
1715 * from the context of the html element.
1716 *
1717 * @TODO figure out what we can do about mouse events lost when the
1718 * user drags objects beyond the window boundary. Currently we can
1719 * detect this in internet explorer by verifying that the mouse is
1720 * down during the mousemove event. Firefox doesn't give us the
1721 * button state on the mousemove event.
1722 * @method handleMouseMove
1723 * @param {Event} e the event
1724 * @private
1725 * @static
1726 */
1727 handleMouseMove: function(e) {
1728 if (! this.dragCurrent) {
1729 return true;
1730 }
1732 // var button = e.which || e.button;
1734 // check for IE mouseup outside of page boundary
1735 if (YAHOO.util.Event.isIE && !e.button) {
1736 this.stopEvent(e);
1737 return this.handleMouseUp(e);
1738 }
1740 if (!this.dragThreshMet) {
1741 var diffX = Math.abs(this.startX - YAHOO.util.Event.getPageX(e));
1742 var diffY = Math.abs(this.startY - YAHOO.util.Event.getPageY(e));
1743 if (diffX > this.clickPixelThresh ||
1744 diffY > this.clickPixelThresh) {
1745 this.startDrag(this.startX, this.startY);
1746 }
1747 }
1749 if (this.dragThreshMet) {
1750 this.dragCurrent.b4Drag(e);
1751 this.dragCurrent.onDrag(e);
1752 this.fireEvents(e, false);
1753 }
1755 this.stopEvent(e);
1757 return true;
1758 },
1760 /**
1761 * Iterates over all of the DragDrop elements to find ones we are
1762 * hovering over or dropping on
1763 * @method fireEvents
1764 * @param {Event} e the event
1765 * @param {boolean} isDrop is this a drop op or a mouseover op?
1766 * @private
1767 * @static
1768 */
1769 fireEvents: function(e, isDrop) {
1770 var dc = this.dragCurrent;
1772 // If the user did the mouse up outside of the window, we could
1773 // get here even though we have ended the drag.
1774 if (!dc || dc.isLocked()) {
1775 return;
1776 }
1778 var x = YAHOO.util.Event.getPageX(e);
1779 var y = YAHOO.util.Event.getPageY(e);
1780 var pt = new YAHOO.util.Point(x,y);
1782 // cache the previous dragOver array
1783 var oldOvers = [];
1785 var outEvts = [];
1786 var overEvts = [];
1787 var dropEvts = [];
1788 var enterEvts = [];
1790 // Check to see if the object(s) we were hovering over is no longer
1791 // being hovered over so we can fire the onDragOut event
1792 for (var i in this.dragOvers) {
1794 var ddo = this.dragOvers[i];
1796 if (! this.isTypeOfDD(ddo)) {
1797 continue;
1798 }
1800 if (! this.isOverTarget(pt, ddo, this.mode)) {
1801 outEvts.push( ddo );
1802 }
1804 oldOvers[i] = true;
1805 delete this.dragOvers[i];
1806 }
1808 for (var sGroup in dc.groups) {
1810 if ("string" != typeof sGroup) {
1811 continue;
1812 }
1814 for (i in this.ids[sGroup]) {
1815 var oDD = this.ids[sGroup][i];
1816 if (! this.isTypeOfDD(oDD)) {
1817 continue;
1818 }
1820 if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
1821 if (this.isOverTarget(pt, oDD, this.mode)) {
1822 // look for drop interactions
1823 if (isDrop) {
1824 dropEvts.push( oDD );
1825 // look for drag enter and drag over interactions
1826 } else {
1828 // initial drag over: dragEnter fires
1829 if (!oldOvers[oDD.id]) {
1830 enterEvts.push( oDD );
1831 // subsequent drag overs: dragOver fires
1832 } else {
1833 overEvts.push( oDD );
1834 }
1836 this.dragOvers[oDD.id] = oDD;
1837 }
1838 }
1839 }
1840 }
1841 }
1843 if (this.mode) {
1844 if (outEvts.length) {
1845 dc.b4DragOut(e, outEvts);
1846 dc.onDragOut(e, outEvts);
1847 }
1849 if (enterEvts.length) {
1850 dc.onDragEnter(e, enterEvts);
1851 }
1853 if (overEvts.length) {
1854 dc.b4DragOver(e, overEvts);
1855 dc.onDragOver(e, overEvts);
1856 }
1858 if (dropEvts.length) {
1859 dc.b4DragDrop(e, dropEvts);
1860 dc.onDragDrop(e, dropEvts);
1861 }
1863 } else {
1864 // fire dragout events
1865 var len = 0;
1866 for (i=0, len=outEvts.length; i<len; ++i) {
1867 dc.b4DragOut(e, outEvts[i].id);
1868 dc.onDragOut(e, outEvts[i].id);
1869 }
1871 // fire enter events
1872 for (i=0,len=enterEvts.length; i<len; ++i) {
1873 // dc.b4DragEnter(e, oDD.id);
1874 dc.onDragEnter(e, enterEvts[i].id);
1875 }
1877 // fire over events
1878 for (i=0,len=overEvts.length; i<len; ++i) {
1879 dc.b4DragOver(e, overEvts[i].id);
1880 dc.onDragOver(e, overEvts[i].id);
1881 }
1883 // fire drop events
1884 for (i=0, len=dropEvts.length; i<len; ++i) {
1885 dc.b4DragDrop(e, dropEvts[i].id);
1886 dc.onDragDrop(e, dropEvts[i].id);
1887 }
1889 }
1891 // notify about a drop that did not find a target
1892 if (isDrop && !dropEvts.length) {
1893 dc.onInvalidDrop(e);
1894 }
1896 },
1898 /**
1899 * Helper function for getting the best match from the list of drag
1900 * and drop objects returned by the drag and drop events when we are
1901 * in INTERSECT mode. It returns either the first object that the
1902 * cursor is over, or the object that has the greatest overlap with
1903 * the dragged element.
1904 * @method getBestMatch
1905 * @param {DragDrop[]} dds The array of drag and drop objects
1906 * targeted
1907 * @return {DragDrop} The best single match
1908 * @static
1909 */
1910 getBestMatch: function(dds) {
1911 var winner = null;
1913 var len = dds.length;
1915 if (len == 1) {
1916 winner = dds[0];
1917 } else {
1918 // Loop through the targeted items
1919 for (var i=0; i<len; ++i) {
1920 var dd = dds[i];
1921 // If the cursor is over the object, it wins. If the
1922 // cursor is over multiple matches, the first one we come
1923 // to wins.
1924 if (this.mode == this.INTERSECT && dd.cursorIsOver) {
1925 winner = dd;
1926 break;
1927 // Otherwise the object with the most overlap wins
1928 } else {
1929 if (!winner || !winner.overlap || (dd.overlap &&
1930 winner.overlap.getArea() < dd.overlap.getArea())) {
1931 winner = dd;
1932 }
1933 }
1934 }
1935 }
1937 return winner;
1938 },
1940 /**
1941 * Refreshes the cache of the top-left and bottom-right points of the
1942 * drag and drop objects in the specified group(s). This is in the
1943 * format that is stored in the drag and drop instance, so typical
1944 * usage is:
1945 * <code>
1946 * YAHOO.util.DragDropMgr.refreshCache(ddinstance.groups);
1947 * </code>
1948 * Alternatively:
1949 * <code>
1950 * YAHOO.util.DragDropMgr.refreshCache({group1:true, group2:true});
1951 * </code>
1952 * @TODO this really should be an indexed array. Alternatively this
1953 * method could accept both.
1954 * @method refreshCache
1955 * @param {Object} groups an associative array of groups to refresh
1956 * @static
1957 */
1958 refreshCache: function(groups) {
1959 for (var sGroup in groups) {
1960 if ("string" != typeof sGroup) {
1961 continue;
1962 }
1963 for (var i in this.ids[sGroup]) {
1964 var oDD = this.ids[sGroup][i];
1966 if (this.isTypeOfDD(oDD)) {
1967 // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
1968 var loc = this.getLocation(oDD);
1969 if (loc) {
1970 this.locationCache[oDD.id] = loc;
1971 } else {
1972 delete this.locationCache[oDD.id];
1973 // this will unregister the drag and drop object if
1974 // the element is not in a usable state
1975 // oDD.unreg();
1976 }
1977 }
1978 }
1979 }
1980 },
1982 /**
1983 * This checks to make sure an element exists and is in the DOM. The
1984 * main purpose is to handle cases where innerHTML is used to remove
1985 * drag and drop objects from the DOM. IE provides an 'unspecified
1986 * error' when trying to access the offsetParent of such an element
1987 * @method verifyEl
1988 * @param {HTMLElement} el the element to check
1989 * @return {boolean} true if the element looks usable
1990 * @static
1991 */
1992 verifyEl: function(el) {
1993 try {
1994 if (el) {
1995 var parent = el.offsetParent;
1996 if (parent) {
1997 return true;
1998 }
1999 }
2000 } catch(e) {
2001 }
2003 return false;
2004 },
2006 /**
2007 * Returns a Region object containing the drag and drop element's position
2008 * and size, including the padding configured for it
2009 * @method getLocation
2010 * @param {DragDrop} oDD the drag and drop object to get the
2011 * location for
2012 * @return {YAHOO.util.Region} a Region object representing the total area
2013 * the element occupies, including any padding
2014 * the instance is configured for.
2015 * @static
2016 */
2017 getLocation: function(oDD) {
2018 if (! this.isTypeOfDD(oDD)) {
2019 return null;
2020 }
2022 var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
2024 try {
2025 pos= YAHOO.util.Dom.getXY(el);
2026 } catch (e) { }
2028 if (!pos) {
2029 return null;
2030 }
2032 x1 = pos[0];
2033 x2 = x1 + el.offsetWidth;
2034 y1 = pos[1];
2035 y2 = y1 + el.offsetHeight;
2037 t = y1 - oDD.padding[0];
2038 r = x2 + oDD.padding[1];
2039 b = y2 + oDD.padding[2];
2040 l = x1 - oDD.padding[3];
2042 return new YAHOO.util.Region( t, r, b, l );
2043 },
2045 /**
2046 * Checks the cursor location to see if it over the target
2047 * @method isOverTarget
2048 * @param {YAHOO.util.Point} pt The point to evaluate
2049 * @param {DragDrop} oTarget the DragDrop object we are inspecting
2050 * @return {boolean} true if the mouse is over the target
2051 * @private
2052 * @static
2053 */
2054 isOverTarget: function(pt, oTarget, intersect) {
2055 // use cache if available
2056 var loc = this.locationCache[oTarget.id];
2057 if (!loc || !this.useCache) {
2058 loc = this.getLocation(oTarget);
2059 this.locationCache[oTarget.id] = loc;
2061 }
2063 if (!loc) {
2064 return false;
2065 }
2067 oTarget.cursorIsOver = loc.contains( pt );
2069 // DragDrop is using this as a sanity check for the initial mousedown
2070 // in this case we are done. In POINT mode, if the drag obj has no
2071 // contraints, we are also done. Otherwise we need to evaluate the
2072 // location of the target as related to the actual location of the
2073 // dragged element.
2074 var dc = this.dragCurrent;
2075 if (!dc || !dc.getTargetCoord ||
2076 (!intersect && !dc.constrainX && !dc.constrainY)) {
2077 return oTarget.cursorIsOver;
2078 }
2080 oTarget.overlap = null;
2082 // Get the current location of the drag element, this is the
2083 // location of the mouse event less the delta that represents
2084 // where the original mousedown happened on the element. We
2085 // need to consider constraints and ticks as well.
2086 var pos = dc.getTargetCoord(pt.x, pt.y);
2088 var el = dc.getDragEl();
2089 var curRegion = new YAHOO.util.Region( pos.y,
2090 pos.x + el.offsetWidth,
2091 pos.y + el.offsetHeight,
2092 pos.x );
2094 var overlap = curRegion.intersect(loc);
2096 if (overlap) {
2097 oTarget.overlap = overlap;
2098 return (intersect) ? true : oTarget.cursorIsOver;
2099 } else {
2100 return false;
2101 }
2102 },
2104 /**
2105 * unload event handler
2106 * @method _onUnload
2107 * @private
2108 * @static
2109 */
2110 _onUnload: function(e, me) {
2111 this.unregAll();
2112 },
2114 /**
2115 * Cleans up the drag and drop events and objects.
2116 * @method unregAll
2117 * @private
2118 * @static
2119 */
2120 unregAll: function() {
2122 if (this.dragCurrent) {
2123 this.stopDrag();
2124 this.dragCurrent = null;
2125 }
2127 this._execOnAll("unreg", []);
2129 for (i in this.elementCache) {
2130 delete this.elementCache[i];
2131 }
2133 this.elementCache = {};
2134 this.ids = {};
2135 },
2137 /**
2138 * A cache of DOM elements
2139 * @property elementCache
2140 * @private
2141 * @static
2142 */
2143 elementCache: {},
2145 /**
2146 * Get the wrapper for the DOM element specified
2147 * @method getElWrapper
2148 * @param {String} id the id of the element to get
2149 * @return {YAHOO.util.DDM.ElementWrapper} the wrapped element
2150 * @private
2151 * @deprecated This wrapper isn't that useful
2152 * @static
2153 */
2154 getElWrapper: function(id) {
2155 var oWrapper = this.elementCache[id];
2156 if (!oWrapper || !oWrapper.el) {
2157 oWrapper = this.elementCache[id] =
2158 new this.ElementWrapper(YAHOO.util.Dom.get(id));
2159 }
2160 return oWrapper;
2161 },
2163 /**
2164 * Returns the actual DOM element
2165 * @method getElement
2166 * @param {String} id the id of the elment to get
2167 * @return {Object} The element
2168 * @deprecated use YAHOO.util.Dom.get instead
2169 * @static
2170 */
2171 getElement: function(id) {
2172 return YAHOO.util.Dom.get(id);
2173 },
2175 /**
2176 * Returns the style property for the DOM element (i.e.,
2177 * document.getElById(id).style)
2178 * @method getCss
2179 * @param {String} id the id of the elment to get
2180 * @return {Object} The style property of the element
2181 * @deprecated use YAHOO.util.Dom instead
2182 * @static
2183 */
2184 getCss: function(id) {
2185 var el = YAHOO.util.Dom.get(id);
2186 return (el) ? el.style : null;
2187 },
2189 /**
2190 * Inner class for cached elements
2191 * @class DragDropMgr.ElementWrapper
2192 * @for DragDropMgr
2193 * @private
2194 * @deprecated
2195 */
2196 ElementWrapper: function(el) {
2197 /**
2198 * The element
2199 * @property el
2200 */
2201 this.el = el || null;
2202 /**
2203 * The element id
2204 * @property id
2205 */
2206 this.id = this.el && el.id;
2207 /**
2208 * A reference to the style property
2209 * @property css
2210 */
2211 this.css = this.el && el.style;
2212 },
2214 /**
2215 * Returns the X position of an html element
2216 * @method getPosX
2217 * @param el the element for which to get the position
2218 * @return {int} the X coordinate
2219 * @for DragDropMgr
2220 * @deprecated use YAHOO.util.Dom.getX instead
2221 * @static
2222 */
2223 getPosX: function(el) {
2224 return YAHOO.util.Dom.getX(el);
2225 },
2227 /**
2228 * Returns the Y position of an html element
2229 * @method getPosY
2230 * @param el the element for which to get the position
2231 * @return {int} the Y coordinate
2232 * @deprecated use YAHOO.util.Dom.getY instead
2233 * @static
2234 */
2235 getPosY: function(el) {
2236 return YAHOO.util.Dom.getY(el);
2237 },
2239 /**
2240 * Swap two nodes. In IE, we use the native method, for others we
2241 * emulate the IE behavior
2242 * @method swapNode
2243 * @param n1 the first node to swap
2244 * @param n2 the other node to swap
2245 * @static
2246 */
2247 swapNode: function(n1, n2) {
2248 if (n1.swapNode) {
2249 n1.swapNode(n2);
2250 } else {
2251 var p = n2.parentNode;
2252 var s = n2.nextSibling;
2254 if (s == n1) {
2255 p.insertBefore(n1, n2);
2256 } else if (n2 == n1.nextSibling) {
2257 p.insertBefore(n2, n1);
2258 } else {
2259 n1.parentNode.replaceChild(n2, n1);
2260 p.insertBefore(n1, s);
2261 }
2262 }
2263 },
2265 /**
2266 * Returns the current scroll position
2267 * @method getScroll
2268 * @private
2269 * @static
2270 */
2271 getScroll: function () {
2272 var t, l, dde=document.documentElement, db=document.body;
2273 if (dde && (dde.scrollTop || dde.scrollLeft)) {
2274 t = dde.scrollTop;
2275 l = dde.scrollLeft;
2276 } else if (db) {
2277 t = db.scrollTop;
2278 l = db.scrollLeft;
2279 } else {
2280 YAHOO.log("could not get scroll property");
2281 }
2282 return { top: t, left: l };
2283 },
2285 /**
2286 * Returns the specified element style property
2287 * @method getStyle
2288 * @param {HTMLElement} el the element
2289 * @param {string} styleProp the style property
2290 * @return {string} The value of the style property
2291 * @deprecated use YAHOO.util.Dom.getStyle
2292 * @static
2293 */
2294 getStyle: function(el, styleProp) {
2295 return YAHOO.util.Dom.getStyle(el, styleProp);
2296 },
2298 /**
2299 * Gets the scrollTop
2300 * @method getScrollTop
2301 * @return {int} the document's scrollTop
2302 * @static
2303 */
2304 getScrollTop: function () { return this.getScroll().top; },
2306 /**
2307 * Gets the scrollLeft
2308 * @method getScrollLeft
2309 * @return {int} the document's scrollTop
2310 * @static
2311 */
2312 getScrollLeft: function () { return this.getScroll().left; },
2314 /**
2315 * Sets the x/y position of an element to the location of the
2316 * target element.
2317 * @method moveToEl
2318 * @param {HTMLElement} moveEl The element to move
2319 * @param {HTMLElement} targetEl The position reference element
2320 * @static
2321 */
2322 moveToEl: function (moveEl, targetEl) {
2323 var aCoord = YAHOO.util.Dom.getXY(targetEl);
2324 YAHOO.util.Dom.setXY(moveEl, aCoord);
2325 },
2327 /**
2328 * Gets the client height
2329 * @method getClientHeight
2330 * @return {int} client height in px
2331 * @deprecated use YAHOO.util.Dom.getViewportHeight instead
2332 * @static
2333 */
2334 getClientHeight: function() {
2335 return YAHOO.util.Dom.getViewportHeight();
2336 },
2338 /**
2339 * Gets the client width
2340 * @method getClientWidth
2341 * @return {int} client width in px
2342 * @deprecated use YAHOO.util.Dom.getViewportWidth instead
2343 * @static
2344 */
2345 getClientWidth: function() {
2346 return YAHOO.util.Dom.getViewportWidth();
2347 },
2349 /**
2350 * Numeric array sort function
2351 * @method numericSort
2352 * @static
2353 */
2354 numericSort: function(a, b) { return (a - b); },
2356 /**
2357 * Internal counter
2358 * @property _timeoutCount
2359 * @private
2360 * @static
2361 */
2362 _timeoutCount: 0,
2364 /**
2365 * Trying to make the load order less important. Without this we get
2366 * an error if this file is loaded before the Event Utility.
2367 * @method _addListeners
2368 * @private
2369 * @static
2370 */
2371 _addListeners: function() {
2372 var DDM = YAHOO.util.DDM;
2373 if ( YAHOO.util.Event && document ) {
2374 DDM._onLoad();
2375 } else {
2376 if (DDM._timeoutCount > 2000) {
2377 } else {
2378 setTimeout(DDM._addListeners, 10);
2379 if (document && document.body) {
2380 DDM._timeoutCount += 1;
2381 }
2382 }
2383 }
2384 },
2386 /**
2387 * Recursively searches the immediate parent and all child nodes for
2388 * the handle element in order to determine wheter or not it was
2389 * clicked.
2390 * @method handleWasClicked
2391 * @param node the html element to inspect
2392 * @static
2393 */
2394 handleWasClicked: function(node, id) {
2395 if (this.isHandle(id, node.id)) {
2396 return true;
2397 } else {
2398 // check to see if this is a text node child of the one we want
2399 var p = node.parentNode;
2401 while (p) {
2402 if (this.isHandle(id, p.id)) {
2403 return true;
2404 } else {
2405 p = p.parentNode;
2406 }
2407 }
2408 }
2410 return false;
2411 }
2413 };
2415 }();
2417 // shorter alias, save a few bytes
2418 YAHOO.util.DDM = YAHOO.util.DragDropMgr;
2419 YAHOO.util.DDM._addListeners();
2421 }
2423 /**
2424 * A DragDrop implementation where the linked element follows the
2425 * mouse cursor during a drag.
2426 * @class DD
2427 * @extends YAHOO.util.DragDrop
2428 * @constructor
2429 * @param {String} id the id of the linked element
2430 * @param {String} sGroup the group of related DragDrop items
2431 * @param {object} config an object containing configurable attributes
2432 * Valid properties for DD:
2433 * scroll
2434 */
2435 YAHOO.util.DD = function(id, sGroup, config) {
2436 if (id) {
2437 this.init(id, sGroup, config);
2438 }
2439 };
2441 YAHOO.extend(YAHOO.util.DD, YAHOO.util.DragDrop, {
2443 /**
2444 * When set to true, the utility automatically tries to scroll the browser
2445 * window wehn a drag and drop element is dragged near the viewport boundary.
2446 * Defaults to true.
2447 * @property scroll
2448 * @type boolean
2449 */
2450 scroll: true,
2452 /**
2453 * Sets the pointer offset to the distance between the linked element's top
2454 * left corner and the location the element was clicked
2455 * @method autoOffset
2456 * @param {int} iPageX the X coordinate of the click
2457 * @param {int} iPageY the Y coordinate of the click
2458 */
2459 autoOffset: function(iPageX, iPageY) {
2460 var x = iPageX - this.startPageX;
2461 var y = iPageY - this.startPageY;
2462 this.setDelta(x, y);
2463 },
2465 /**
2466 * Sets the pointer offset. You can call this directly to force the
2467 * offset to be in a particular location (e.g., pass in 0,0 to set it
2468 * to the center of the object, as done in YAHOO.widget.Slider)
2469 * @method setDelta
2470 * @param {int} iDeltaX the distance from the left
2471 * @param {int} iDeltaY the distance from the top
2472 */
2473 setDelta: function(iDeltaX, iDeltaY) {
2474 this.deltaX = iDeltaX;
2475 this.deltaY = iDeltaY;
2476 },
2478 /**
2479 * Sets the drag element to the location of the mousedown or click event,
2480 * maintaining the cursor location relative to the location on the element
2481 * that was clicked. Override this if you want to place the element in a
2482 * location other than where the cursor is.
2483 * @method setDragElPos
2484 * @param {int} iPageX the X coordinate of the mousedown or drag event
2485 * @param {int} iPageY the Y coordinate of the mousedown or drag event
2486 */
2487 setDragElPos: function(iPageX, iPageY) {
2488 // the first time we do this, we are going to check to make sure
2489 // the element has css positioning
2491 var el = this.getDragEl();
2492 this.alignElWithMouse(el, iPageX, iPageY);
2493 },
2495 /**
2496 * Sets the element to the location of the mousedown or click event,
2497 * maintaining the cursor location relative to the location on the element
2498 * that was clicked. Override this if you want to place the element in a
2499 * location other than where the cursor is.
2500 * @method alignElWithMouse
2501 * @param {HTMLElement} el the element to move
2502 * @param {int} iPageX the X coordinate of the mousedown or drag event
2503 * @param {int} iPageY the Y coordinate of the mousedown or drag event
2504 */
2505 alignElWithMouse: function(el, iPageX, iPageY) {
2506 var oCoord = this.getTargetCoord(iPageX, iPageY);
2508 if (!this.deltaSetXY) {
2509 var aCoord = [oCoord.x, oCoord.y];
2510 YAHOO.util.Dom.setXY(el, aCoord);
2511 var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
2512 var newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
2514 this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
2515 } else {
2516 YAHOO.util.Dom.setStyle(el, "left", (oCoord.x + this.deltaSetXY[0]) + "px");
2517 YAHOO.util.Dom.setStyle(el, "top", (oCoord.y + this.deltaSetXY[1]) + "px");
2518 }
2520 this.cachePosition(oCoord.x, oCoord.y);
2521 this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
2522 },
2524 /**
2525 * Saves the most recent position so that we can reset the constraints and
2526 * tick marks on-demand. We need to know this so that we can calculate the
2527 * number of pixels the element is offset from its original position.
2528 * @method cachePosition
2529 * @param iPageX the current x position (optional, this just makes it so we
2530 * don't have to look it up again)
2531 * @param iPageY the current y position (optional, this just makes it so we
2532 * don't have to look it up again)
2533 */
2534 cachePosition: function(iPageX, iPageY) {
2535 if (iPageX) {
2536 this.lastPageX = iPageX;
2537 this.lastPageY = iPageY;
2538 } else {
2539 var aCoord = YAHOO.util.Dom.getXY(this.getEl());
2540 this.lastPageX = aCoord[0];
2541 this.lastPageY = aCoord[1];
2542 }
2543 },
2545 /**
2546 * Auto-scroll the window if the dragged object has been moved beyond the
2547 * visible window boundary.
2548 * @method autoScroll
2549 * @param {int} x the drag element's x position
2550 * @param {int} y the drag element's y position
2551 * @param {int} h the height of the drag element
2552 * @param {int} w the width of the drag element
2553 * @private
2554 */
2555 autoScroll: function(x, y, h, w) {
2557 if (this.scroll) {
2558 // The client height
2559 var clientH = this.DDM.getClientHeight();
2561 // The client width
2562 var clientW = this.DDM.getClientWidth();
2564 // The amt scrolled down
2565 var st = this.DDM.getScrollTop();
2567 // The amt scrolled right
2568 var sl = this.DDM.getScrollLeft();
2570 // Location of the bottom of the element
2571 var bot = h + y;
2573 // Location of the right of the element
2574 var right = w + x;
2576 // The distance from the cursor to the bottom of the visible area,
2577 // adjusted so that we don't scroll if the cursor is beyond the
2578 // element drag constraints
2579 var toBot = (clientH + st - y - this.deltaY);
2581 // The distance from the cursor to the right of the visible area
2582 var toRight = (clientW + sl - x - this.deltaX);
2585 // How close to the edge the cursor must be before we scroll
2586 // var thresh = (document.all) ? 100 : 40;
2587 var thresh = 40;
2589 // How many pixels to scroll per autoscroll op. This helps to reduce
2590 // clunky scrolling. IE is more sensitive about this ... it needs this
2591 // value to be higher.
2592 var scrAmt = (document.all) ? 80 : 30;
2594 // Scroll down if we are near the bottom of the visible page and the
2595 // obj extends below the crease
2596 if ( bot > clientH && toBot < thresh ) {
2597 window.scrollTo(sl, st + scrAmt);
2598 }
2600 // Scroll up if the window is scrolled down and the top of the object
2601 // goes above the top border
2602 if ( y < st && st > 0 && y - st < thresh ) {
2603 window.scrollTo(sl, st - scrAmt);
2604 }
2606 // Scroll right if the obj is beyond the right border and the cursor is
2607 // near the border.
2608 if ( right > clientW && toRight < thresh ) {
2609 window.scrollTo(sl + scrAmt, st);
2610 }
2612 // Scroll left if the window has been scrolled to the right and the obj
2613 // extends past the left border
2614 if ( x < sl && sl > 0 && x - sl < thresh ) {
2615 window.scrollTo(sl - scrAmt, st);
2616 }
2617 }
2618 },
2620 /**
2621 * Finds the location the element should be placed if we want to move
2622 * it to where the mouse location less the click offset would place us.
2623 * @method getTargetCoord
2624 * @param {int} iPageX the X coordinate of the click
2625 * @param {int} iPageY the Y coordinate of the click
2626 * @return an object that contains the coordinates (Object.x and Object.y)
2627 * @private
2628 */
2629 getTargetCoord: function(iPageX, iPageY) {
2632 var x = iPageX - this.deltaX;
2633 var y = iPageY - this.deltaY;
2635 if (this.constrainX) {
2636 if (x < this.minX) { x = this.minX; }
2637 if (x > this.maxX) { x = this.maxX; }
2638 }
2640 if (this.constrainY) {
2641 if (y < this.minY) { y = this.minY; }
2642 if (y > this.maxY) { y = this.maxY; }
2643 }
2645 x = this.getTick(x, this.xTicks);
2646 y = this.getTick(y, this.yTicks);
2649 return {x:x, y:y};
2650 },
2652 /*
2653 * Sets up config options specific to this class. Overrides
2654 * YAHOO.util.DragDrop, but all versions of this method through the
2655 * inheritance chain are called
2656 */
2657 applyConfig: function() {
2658 YAHOO.util.DD.superclass.applyConfig.call(this);
2659 this.scroll = (this.config.scroll !== false);
2660 },
2662 /*
2663 * Event that fires prior to the onMouseDown event. Overrides
2664 * YAHOO.util.DragDrop.
2665 */
2666 b4MouseDown: function(e) {
2667 // this.resetConstraints();
2668 this.autoOffset(YAHOO.util.Event.getPageX(e),
2669 YAHOO.util.Event.getPageY(e));
2670 },
2672 /*
2673 * Event that fires prior to the onDrag event. Overrides
2674 * YAHOO.util.DragDrop.
2675 */
2676 b4Drag: function(e) {
2677 this.setDragElPos(YAHOO.util.Event.getPageX(e),
2678 YAHOO.util.Event.getPageY(e));
2679 },
2681 toString: function() {
2682 return ("DD " + this.id);
2683 }
2685 //////////////////////////////////////////////////////////////////////////
2686 // Debugging ygDragDrop events that can be overridden
2687 //////////////////////////////////////////////////////////////////////////
2688 /*
2689 startDrag: function(x, y) {
2690 },
2692 onDrag: function(e) {
2693 },
2695 onDragEnter: function(e, id) {
2696 },
2698 onDragOver: function(e, id) {
2699 },
2701 onDragOut: function(e, id) {
2702 },
2704 onDragDrop: function(e, id) {
2705 },
2707 endDrag: function(e) {
2708 }
2710 */
2712 });
2713 /**
2714 * A DragDrop implementation that inserts an empty, bordered div into
2715 * the document that follows the cursor during drag operations. At the time of
2716 * the click, the frame div is resized to the dimensions of the linked html
2717 * element, and moved to the exact location of the linked element.
2718 *
2719 * References to the "frame" element refer to the single proxy element that
2720 * was created to be dragged in place of all DDProxy elements on the
2721 * page.
2722 *
2723 * @class DDProxy
2724 * @extends YAHOO.util.DD
2725 * @constructor
2726 * @param {String} id the id of the linked html element
2727 * @param {String} sGroup the group of related DragDrop objects
2728 * @param {object} config an object containing configurable attributes
2729 * Valid properties for DDProxy in addition to those in DragDrop:
2730 * resizeFrame, centerFrame, dragElId
2731 */
2732 YAHOO.util.DDProxy = function(id, sGroup, config) {
2733 if (id) {
2734 this.init(id, sGroup, config);
2735 this.initFrame();
2736 }
2737 };
2739 /**
2740 * The default drag frame div id
2741 * @property YAHOO.util.DDProxy.dragElId
2742 * @type String
2743 * @static
2744 */
2745 YAHOO.util.DDProxy.dragElId = "ygddfdiv";
2747 YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD, {
2749 /**
2750 * By default we resize the drag frame to be the same size as the element
2751 * we want to drag (this is to get the frame effect). We can turn it off
2752 * if we want a different behavior.
2753 * @property resizeFrame
2754 * @type boolean
2755 */
2756 resizeFrame: true,
2758 /**
2759 * By default the frame is positioned exactly where the drag element is, so
2760 * we use the cursor offset provided by YAHOO.util.DD. Another option that works only if
2761 * you do not have constraints on the obj is to have the drag frame centered
2762 * around the cursor. Set centerFrame to true for this effect.
2763 * @property centerFrame
2764 * @type boolean
2765 */
2766 centerFrame: false,
2768 /**
2769 * Creates the proxy element if it does not yet exist
2770 * @method createFrame
2771 */
2772 createFrame: function() {
2773 var self = this;
2774 var body = document.body;
2776 if (!body || !body.firstChild) {
2777 setTimeout( function() { self.createFrame(); }, 50 );
2778 return;
2779 }
2781 var div = this.getDragEl();
2783 if (!div) {
2784 div = document.createElement("div");
2785 div.id = this.dragElId;
2786 var s = div.style;
2788 s.position = "absolute";
2789 s.visibility = "hidden";
2790 s.cursor = "move";
2791 s.border = "2px solid #aaa";
2792 s.zIndex = 999;
2794 // appendChild can blow up IE if invoked prior to the window load event
2795 // while rendering a table. It is possible there are other scenarios
2796 // that would cause this to happen as well.
2797 body.insertBefore(div, body.firstChild);
2798 }
2799 },
2801 /**
2802 * Initialization for the drag frame element. Must be called in the
2803 * constructor of all subclasses
2804 * @method initFrame
2805 */
2806 initFrame: function() {
2807 this.createFrame();
2808 },
2810 applyConfig: function() {
2811 YAHOO.util.DDProxy.superclass.applyConfig.call(this);
2813 this.resizeFrame = (this.config.resizeFrame !== false);
2814 this.centerFrame = (this.config.centerFrame);
2815 this.setDragElId(this.config.dragElId || YAHOO.util.DDProxy.dragElId);
2816 },
2818 /**
2819 * Resizes the drag frame to the dimensions of the clicked object, positions
2820 * it over the object, and finally displays it
2821 * @method showFrame
2822 * @param {int} iPageX X click position
2823 * @param {int} iPageY Y click position
2824 * @private
2825 */
2826 showFrame: function(iPageX, iPageY) {
2827 var el = this.getEl();
2828 var dragEl = this.getDragEl();
2829 var s = dragEl.style;
2831 this._resizeProxy();
2833 if (this.centerFrame) {
2834 this.setDelta( Math.round(parseInt(s.width, 10)/2),
2835 Math.round(parseInt(s.height, 10)/2) );
2836 }
2838 this.setDragElPos(iPageX, iPageY);
2840 YAHOO.util.Dom.setStyle(dragEl, "visibility", "visible");
2841 },
2843 /**
2844 * The proxy is automatically resized to the dimensions of the linked
2845 * element when a drag is initiated, unless resizeFrame is set to false
2846 * @method _resizeProxy
2847 * @private
2848 */
2849 _resizeProxy: function() {
2850 if (this.resizeFrame) {
2851 var DOM = YAHOO.util.Dom;
2852 var el = this.getEl();
2853 var dragEl = this.getDragEl();
2855 var bt = parseInt( DOM.getStyle(dragEl, "borderTopWidth" ), 10);
2856 var br = parseInt( DOM.getStyle(dragEl, "borderRightWidth" ), 10);
2857 var bb = parseInt( DOM.getStyle(dragEl, "borderBottomWidth" ), 10);
2858 var bl = parseInt( DOM.getStyle(dragEl, "borderLeftWidth" ), 10);
2860 if (isNaN(bt)) { bt = 0; }
2861 if (isNaN(br)) { br = 0; }
2862 if (isNaN(bb)) { bb = 0; }
2863 if (isNaN(bl)) { bl = 0; }
2866 var newWidth = Math.max(0, el.offsetWidth - br - bl);
2867 var newHeight = Math.max(0, el.offsetHeight - bt - bb);
2870 DOM.setStyle( dragEl, "width", newWidth + "px" );
2871 DOM.setStyle( dragEl, "height", newHeight + "px" );
2872 }
2873 },
2875 // overrides YAHOO.util.DragDrop
2876 b4MouseDown: function(e) {
2877 var x = YAHOO.util.Event.getPageX(e);
2878 var y = YAHOO.util.Event.getPageY(e);
2879 this.autoOffset(x, y);
2880 this.setDragElPos(x, y);
2881 },
2883 // overrides YAHOO.util.DragDrop
2884 b4StartDrag: function(x, y) {
2885 // show the drag frame
2886 this.showFrame(x, y);
2887 },
2889 // overrides YAHOO.util.DragDrop
2890 b4EndDrag: function(e) {
2891 YAHOO.util.Dom.setStyle(this.getDragEl(), "visibility", "hidden");
2892 },
2894 // overrides YAHOO.util.DragDrop
2895 // By default we try to move the element to the last location of the frame.
2896 // This is so that the default behavior mirrors that of YAHOO.util.DD.
2897 endDrag: function(e) {
2898 var DOM = YAHOO.util.Dom;
2899 var lel = this.getEl();
2900 var del = this.getDragEl();
2902 // Show the drag frame briefly so we can get its position
2903 // del.style.visibility = "";
2904 DOM.setStyle(del, "visibility", "");
2906 // Hide the linked element before the move to get around a Safari
2907 // rendering bug.
2908 //lel.style.visibility = "hidden";
2909 DOM.setStyle(lel, "visibility", "hidden");
2910 YAHOO.util.DDM.moveToEl(lel, del);
2911 //del.style.visibility = "hidden";
2912 DOM.setStyle(del, "visibility", "hidden");
2913 //lel.style.visibility = "";
2914 DOM.setStyle(lel, "visibility", "");
2915 },
2917 toString: function() {
2918 return ("DDProxy " + this.id);
2919 }
2921 });
2922 /**
2923 * A DragDrop implementation that does not move, but can be a drop
2924 * target. You would get the same result by simply omitting implementation
2925 * for the event callbacks, but this way we reduce the processing cost of the
2926 * event listener and the callbacks.
2927 * @class DDTarget
2928 * @extends YAHOO.util.DragDrop
2929 * @constructor
2930 * @param {String} id the id of the element that is a drop target
2931 * @param {String} sGroup the group of related DragDrop objects
2932 * @param {object} config an object containing configurable attributes
2933 * Valid properties for DDTarget in addition to those in
2934 * DragDrop:
2935 * none
2936 */
2937 YAHOO.util.DDTarget = function(id, sGroup, config) {
2938 if (id) {
2939 this.initTarget(id, sGroup, config);
2940 }
2941 };
2943 // YAHOO.util.DDTarget.prototype = new YAHOO.util.DragDrop();
2944 YAHOO.extend(YAHOO.util.DDTarget, YAHOO.util.DragDrop, {
2945 toString: function() {
2946 return ("DDTarget " + this.id);
2947 }
2948 });