| blob | 60f3268dfcb8132044f12dd06cc1215baf0a91ca |
1 /*
2 Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
5 version: 2.5.2
6 */
7 /**
8 * The drag and drop utility provides a framework for building drag and drop
9 * applications. In addition to enabling drag and drop for specific elements,
10 * the drag and drop elements are tracked by the manager class, and the
11 * interactions between the various elements are tracked during the drag and
12 * the implementing code is notified about these important moments.
13 * @module dragdrop
14 * @title Drag and Drop
15 * @requires yahoo,dom,event
16 * @namespace YAHOO.util
17 */
19 // Only load the library once. Rewriting the manager class would orphan
20 // existing drag and drop instances.
21 if (!YAHOO.util.DragDropMgr) {
23 /**
24 * DragDropMgr is a singleton that tracks the element interaction for
25 * all DragDrop items in the window. Generally, you will not call
26 * this class directly, but it does have helper methods that could
27 * be useful in your DragDrop implementations.
28 * @class DragDropMgr
29 * @static
30 */
31 YAHOO.util.DragDropMgr = function() {
33 var Event = YAHOO.util.Event;
35 return {
36 /**
37 * Two dimensional Array of registered DragDrop objects. The first
38 * dimension is the DragDrop item group, the second the DragDrop
39 * object.
40 * @property ids
41 * @type {string: string}
42 * @private
43 * @static
44 */
45 ids: {},
47 /**
48 * Array of element ids defined as drag handles. Used to determine
49 * if the element that generated the mousedown event is actually the
50 * handle and not the html element itself.
51 * @property handleIds
52 * @type {string: string}
53 * @private
54 * @static
55 */
56 handleIds: {},
58 /**
59 * the DragDrop object that is currently being dragged
60 * @property dragCurrent
61 * @type DragDrop
62 * @private
63 * @static
64 **/
65 dragCurrent: null,
67 /**
68 * the DragDrop object(s) that are being hovered over
69 * @property dragOvers
70 * @type Array
71 * @private
72 * @static
73 */
74 dragOvers: {},
76 /**
77 * the X distance between the cursor and the object being dragged
78 * @property deltaX
79 * @type int
80 * @private
81 * @static
82 */
83 deltaX: 0,
85 /**
86 * the Y distance between the cursor and the object being dragged
87 * @property deltaY
88 * @type int
89 * @private
90 * @static
91 */
92 deltaY: 0,
94 /**
95 * Flag to determine if we should prevent the default behavior of the
96 * events we define. By default this is true, but this can be set to
97 * false if you need the default behavior (not recommended)
98 * @property preventDefault
99 * @type boolean
100 * @static
101 */
102 preventDefault: true,
104 /**
105 * Flag to determine if we should stop the propagation of the events
106 * we generate. This is true by default but you may want to set it to
107 * false if the html element contains other features that require the
108 * mouse click.
109 * @property stopPropagation
110 * @type boolean
111 * @static
112 */
113 stopPropagation: true,
115 /**
116 * Internal flag that is set to true when drag and drop has been
117 * initialized
118 * @property initialized
119 * @private
120 * @static
121 */
122 initialized: false,
124 /**
125 * All drag and drop can be disabled.
126 * @property locked
127 * @private
128 * @static
129 */
130 locked: false,
132 /**
133 * Provides additional information about the the current set of
134 * interactions. Can be accessed from the event handlers. It
135 * contains the following properties:
136 *
137 * out: onDragOut interactions
138 * enter: onDragEnter interactions
139 * over: onDragOver interactions
140 * drop: onDragDrop interactions
141 * point: The location of the cursor
142 * draggedRegion: The location of dragged element at the time
143 * of the interaction
144 * sourceRegion: The location of the source elemtn at the time
145 * of the interaction
146 * validDrop: boolean
147 * @property interactionInfo
148 * @type object
149 * @static
150 */
151 interactionInfo: null,
153 /**
154 * Called the first time an element is registered.
155 * @method init
156 * @private
157 * @static
158 */
159 init: function() {
160 this.initialized = true;
161 },
163 /**
164 * In point mode, drag and drop interaction is defined by the
165 * location of the cursor during the drag/drop
166 * @property POINT
167 * @type int
168 * @static
169 * @final
170 */
171 POINT: 0,
173 /**
174 * In intersect mode, drag and drop interaction is defined by the
175 * cursor position or the amount of overlap of two or more drag and
176 * drop objects.
177 * @property INTERSECT
178 * @type int
179 * @static
180 * @final
181 */
182 INTERSECT: 1,
184 /**
185 * In intersect mode, drag and drop interaction is defined only by the
186 * overlap of two or more drag and drop objects.
187 * @property STRICT_INTERSECT
188 * @type int
189 * @static
190 * @final
191 */
192 STRICT_INTERSECT: 2,
194 /**
195 * The current drag and drop mode. Default: POINT
196 * @property mode
197 * @type int
198 * @static
199 */
200 mode: 0,
202 /**
203 * Runs method on all drag and drop objects
204 * @method _execOnAll
205 * @private
206 * @static
207 */
208 _execOnAll: function(sMethod, args) {
209 for (var i in this.ids) {
210 for (var j in this.ids[i]) {
211 var oDD = this.ids[i][j];
212 if (! this.isTypeOfDD(oDD)) {
213 continue;
214 }
215 oDD[sMethod].apply(oDD, args);
216 }
217 }
218 },
220 /**
221 * Drag and drop initialization. Sets up the global event handlers
222 * @method _onLoad
223 * @private
224 * @static
225 */
226 _onLoad: function() {
228 this.init();
230 YAHOO.log("DragDropMgr onload", "info", "DragDropMgr");
232 Event.on(document, "mouseup", this.handleMouseUp, this, true);
233 Event.on(document, "mousemove", this.handleMouseMove, this, true);
234 Event.on(window, "unload", this._onUnload, this, true);
235 Event.on(window, "resize", this._onResize, this, true);
236 // Event.on(window, "mouseout", this._test);
238 },
240 /**
241 * Reset constraints on all drag and drop objs
242 * @method _onResize
243 * @private
244 * @static
245 */
246 _onResize: function(e) {
247 YAHOO.log("window resize", "info", "DragDropMgr");
248 this._execOnAll("resetConstraints", []);
249 },
251 /**
252 * Lock all drag and drop functionality
253 * @method lock
254 * @static
255 */
256 lock: function() { this.locked = true; },
258 /**
259 * Unlock all drag and drop functionality
260 * @method unlock
261 * @static
262 */
263 unlock: function() { this.locked = false; },
265 /**
266 * Is drag and drop locked?
267 * @method isLocked
268 * @return {boolean} True if drag and drop is locked, false otherwise.
269 * @static
270 */
271 isLocked: function() { return this.locked; },
273 /**
274 * Location cache that is set for all drag drop objects when a drag is
275 * initiated, cleared when the drag is finished.
276 * @property locationCache
277 * @private
278 * @static
279 */
280 locationCache: {},
282 /**
283 * Set useCache to false if you want to force object the lookup of each
284 * drag and drop linked element constantly during a drag.
285 * @property useCache
286 * @type boolean
287 * @static
288 */
289 useCache: true,
291 /**
292 * The number of pixels that the mouse needs to move after the
293 * mousedown before the drag is initiated. Default=3;
294 * @property clickPixelThresh
295 * @type int
296 * @static
297 */
298 clickPixelThresh: 3,
300 /**
301 * The number of milliseconds after the mousedown event to initiate the
302 * drag if we don't get a mouseup event. Default=1000
303 * @property clickTimeThresh
304 * @type int
305 * @static
306 */
307 clickTimeThresh: 1000,
309 /**
310 * Flag that indicates that either the drag pixel threshold or the
311 * mousdown time threshold has been met
312 * @property dragThreshMet
313 * @type boolean
314 * @private
315 * @static
316 */
317 dragThreshMet: false,
319 /**
320 * Timeout used for the click time threshold
321 * @property clickTimeout
322 * @type Object
323 * @private
324 * @static
325 */
326 clickTimeout: null,
328 /**
329 * The X position of the mousedown event stored for later use when a
330 * drag threshold is met.
331 * @property startX
332 * @type int
333 * @private
334 * @static
335 */
336 startX: 0,
338 /**
339 * The Y position of the mousedown event stored for later use when a
340 * drag threshold is met.
341 * @property startY
342 * @type int
343 * @private
344 * @static
345 */
346 startY: 0,
348 /**
349 * Flag to determine if the drag event was fired from the click timeout and
350 * not the mouse move threshold.
351 * @property fromTimeout
352 * @type boolean
353 * @private
354 * @static
355 */
356 fromTimeout: false,
358 /**
359 * Each DragDrop instance must be registered with the DragDropMgr.
360 * This is executed in DragDrop.init()
361 * @method regDragDrop
362 * @param {DragDrop} oDD the DragDrop object to register
363 * @param {String} sGroup the name of the group this element belongs to
364 * @static
365 */
366 regDragDrop: function(oDD, sGroup) {
367 if (!this.initialized) { this.init(); }
369 if (!this.ids[sGroup]) {
370 this.ids[sGroup] = {};
371 }
372 this.ids[sGroup][oDD.id] = oDD;
373 },
375 /**
376 * Removes the supplied dd instance from the supplied group. Executed
377 * by DragDrop.removeFromGroup, so don't call this function directly.
378 * @method removeDDFromGroup
379 * @private
380 * @static
381 */
382 removeDDFromGroup: function(oDD, sGroup) {
383 if (!this.ids[sGroup]) {
384 this.ids[sGroup] = {};
385 }
387 var obj = this.ids[sGroup];
388 if (obj && obj[oDD.id]) {
389 delete obj[oDD.id];
390 }
391 },
393 /**
394 * Unregisters a drag and drop item. This is executed in
395 * DragDrop.unreg, use that method instead of calling this directly.
396 * @method _remove
397 * @private
398 * @static
399 */
400 _remove: function(oDD) {
401 for (var g in oDD.groups) {
402 if (g && this.ids[g][oDD.id]) {
403 delete this.ids[g][oDD.id];
404 //YAHOO.log("NEW LEN " + this.ids.length, "warn");
405 }
406 }
407 delete this.handleIds[oDD.id];
408 },
410 /**
411 * Each DragDrop handle element must be registered. This is done
412 * automatically when executing DragDrop.setHandleElId()
413 * @method regHandle
414 * @param {String} sDDId the DragDrop id this element is a handle for
415 * @param {String} sHandleId the id of the element that is the drag
416 * handle
417 * @static
418 */
419 regHandle: function(sDDId, sHandleId) {
420 if (!this.handleIds[sDDId]) {
421 this.handleIds[sDDId] = {};
422 }
423 this.handleIds[sDDId][sHandleId] = sHandleId;
424 },
426 /**
427 * Utility function to determine if a given element has been
428 * registered as a drag drop item.
429 * @method isDragDrop
430 * @param {String} id the element id to check
431 * @return {boolean} true if this element is a DragDrop item,
432 * false otherwise
433 * @static
434 */
435 isDragDrop: function(id) {
436 return ( this.getDDById(id) ) ? true : false;
437 },
439 /**
440 * Returns the drag and drop instances that are in all groups the
441 * passed in instance belongs to.
442 * @method getRelated
443 * @param {DragDrop} p_oDD the obj to get related data for
444 * @param {boolean} bTargetsOnly if true, only return targetable objs
445 * @return {DragDrop[]} the related instances
446 * @static
447 */
448 getRelated: function(p_oDD, bTargetsOnly) {
449 var oDDs = [];
450 for (var i in p_oDD.groups) {
451 for (var j in this.ids[i]) {
452 var dd = this.ids[i][j];
453 if (! this.isTypeOfDD(dd)) {
454 continue;
455 }
456 if (!bTargetsOnly || dd.isTarget) {
457 oDDs[oDDs.length] = dd;
458 }
459 }
460 }
462 return oDDs;
463 },
465 /**
466 * Returns true if the specified dd target is a legal target for
467 * the specifice drag obj
468 * @method isLegalTarget
469 * @param {DragDrop} the drag obj
470 * @param {DragDrop} the target
471 * @return {boolean} true if the target is a legal target for the
472 * dd obj
473 * @static
474 */
475 isLegalTarget: function (oDD, oTargetDD) {
476 var targets = this.getRelated(oDD, true);
477 for (var i=0, len=targets.length;i<len;++i) {
478 if (targets[i].id == oTargetDD.id) {
479 return true;
480 }
481 }
483 return false;
484 },
486 /**
487 * My goal is to be able to transparently determine if an object is
488 * typeof DragDrop, and the exact subclass of DragDrop. typeof
489 * returns "object", oDD.constructor.toString() always returns
490 * "DragDrop" and not the name of the subclass. So for now it just
491 * evaluates a well-known variable in DragDrop.
492 * @method isTypeOfDD
493 * @param {Object} the object to evaluate
494 * @return {boolean} true if typeof oDD = DragDrop
495 * @static
496 */
497 isTypeOfDD: function (oDD) {
498 return (oDD && oDD.__ygDragDrop);
499 },
501 /**
502 * Utility function to determine if a given element has been
503 * registered as a drag drop handle for the given Drag Drop object.
504 * @method isHandle
505 * @param {String} id the element id to check
506 * @return {boolean} true if this element is a DragDrop handle, false
507 * otherwise
508 * @static
509 */
510 isHandle: function(sDDId, sHandleId) {
511 return ( this.handleIds[sDDId] &&
512 this.handleIds[sDDId][sHandleId] );
513 },
515 /**
516 * Returns the DragDrop instance for a given id
517 * @method getDDById
518 * @param {String} id the id of the DragDrop object
519 * @return {DragDrop} the drag drop object, null if it is not found
520 * @static
521 */
522 getDDById: function(id) {
523 for (var i in this.ids) {
524 if (this.ids[i][id]) {
525 return this.ids[i][id];
526 }
527 }
528 return null;
529 },
531 /**
532 * Fired after a registered DragDrop object gets the mousedown event.
533 * Sets up the events required to track the object being dragged
534 * @method handleMouseDown
535 * @param {Event} e the event
536 * @param oDD the DragDrop object being dragged
537 * @private
538 * @static
539 */
540 handleMouseDown: function(e, oDD) {
542 this.currentTarget = YAHOO.util.Event.getTarget(e);
544 this.dragCurrent = oDD;
546 var el = oDD.getEl();
548 // track start position
549 this.startX = YAHOO.util.Event.getPageX(e);
550 this.startY = YAHOO.util.Event.getPageY(e);
552 this.deltaX = this.startX - el.offsetLeft;
553 this.deltaY = this.startY - el.offsetTop;
555 this.dragThreshMet = false;
557 this.clickTimeout = setTimeout(
558 function() {
559 var DDM = YAHOO.util.DDM;
560 DDM.startDrag(DDM.startX, DDM.startY);
561 DDM.fromTimeout = true;
562 },
563 this.clickTimeThresh );
564 },
566 /**
567 * Fired when either the drag pixel threshol or the mousedown hold
568 * time threshold has been met.
569 * @method startDrag
570 * @param x {int} the X position of the original mousedown
571 * @param y {int} the Y position of the original mousedown
572 * @static
573 */
574 startDrag: function(x, y) {
575 YAHOO.log("firing drag start events", "info", "DragDropMgr");
576 clearTimeout(this.clickTimeout);
577 var dc = this.dragCurrent;
578 if (dc && dc.events.b4StartDrag) {
579 dc.b4StartDrag(x, y);
580 dc.fireEvent('b4StartDragEvent', { x: x, y: y });
581 }
582 if (dc && dc.events.startDrag) {
583 dc.startDrag(x, y);
584 dc.fireEvent('startDragEvent', { x: x, y: y });
585 }
586 this.dragThreshMet = true;
587 },
589 /**
590 * Internal function to handle the mouseup event. Will be invoked
591 * from the context of the document.
592 * @method handleMouseUp
593 * @param {Event} e the event
594 * @private
595 * @static
596 */
597 handleMouseUp: function(e) {
598 if (this.dragCurrent) {
599 clearTimeout(this.clickTimeout);
601 if (this.dragThreshMet) {
602 YAHOO.log("mouseup detected - completing drag", "info", "DragDropMgr");
603 if (this.fromTimeout) {
604 YAHOO.log('fromTimeout is true (mouse didn\'t move), call handleMouseMove so we can get the dragOver event', 'info', 'DragDropMgr');
605 this.fromTimeout = false;
606 this.handleMouseMove(e);
607 }
608 this.fromTimeout = false;
609 this.fireEvents(e, true);
610 } else {
611 YAHOO.log("drag threshold not met", "info", "DragDropMgr");
612 }
614 this.stopDrag(e);
616 this.stopEvent(e);
617 }
618 },
620 /**
621 * Utility to stop event propagation and event default, if these
622 * features are turned on.
623 * @method stopEvent
624 * @param {Event} e the event as returned by this.getEvent()
625 * @static
626 */
627 stopEvent: function(e) {
628 if (this.stopPropagation) {
629 YAHOO.util.Event.stopPropagation(e);
630 }
632 if (this.preventDefault) {
633 YAHOO.util.Event.preventDefault(e);
634 }
635 },
637 /**
638 * Ends the current drag, cleans up the state, and fires the endDrag
639 * and mouseUp events. Called internally when a mouseup is detected
640 * during the drag. Can be fired manually during the drag by passing
641 * either another event (such as the mousemove event received in onDrag)
642 * or a fake event with pageX and pageY defined (so that endDrag and
643 * onMouseUp have usable position data.). Alternatively, pass true
644 * for the silent parameter so that the endDrag and onMouseUp events
645 * are skipped (so no event data is needed.)
646 *
647 * @method stopDrag
648 * @param {Event} e the mouseup event, another event (or a fake event)
649 * with pageX and pageY defined, or nothing if the
650 * silent parameter is true
651 * @param {boolean} silent skips the enddrag and mouseup events if true
652 * @static
653 */
654 stopDrag: function(e, silent) {
655 // YAHOO.log("mouseup - removing event handlers");
656 var dc = this.dragCurrent;
657 // Fire the drag end event for the item that was dragged
658 if (dc && !silent) {
659 if (this.dragThreshMet) {
660 YAHOO.log("firing endDrag events", "info", "DragDropMgr");
661 if (dc.events.b4EndDrag) {
662 dc.b4EndDrag(e);
663 dc.fireEvent('b4EndDragEvent', { e: e });
664 }
665 if (dc.events.endDrag) {
666 dc.endDrag(e);
667 dc.fireEvent('endDragEvent', { e: e });
668 }
669 }
670 if (dc.events.mouseUp) {
671 YAHOO.log("firing dragdrop onMouseUp event", "info", "DragDropMgr");
672 dc.onMouseUp(e);
673 dc.fireEvent('mouseUpEvent', { e: e });
674 }
675 }
677 this.dragCurrent = null;
678 this.dragOvers = {};
679 },
681 /**
682 * Internal function to handle the mousemove event. Will be invoked
683 * from the context of the html element.
684 *
685 * @TODO figure out what we can do about mouse events lost when the
686 * user drags objects beyond the window boundary. Currently we can
687 * detect this in internet explorer by verifying that the mouse is
688 * down during the mousemove event. Firefox doesn't give us the
689 * button state on the mousemove event.
690 * @method handleMouseMove
691 * @param {Event} e the event
692 * @private
693 * @static
694 */
695 handleMouseMove: function(e) {
696 //YAHOO.log("handlemousemove");
698 var dc = this.dragCurrent;
699 if (dc) {
700 // YAHOO.log("no current drag obj");
702 // var button = e.which || e.button;
703 // YAHOO.log("which: " + e.which + ", button: "+ e.button);
705 // check for IE mouseup outside of page boundary
706 if (YAHOO.util.Event.isIE && !e.button) {
707 YAHOO.log("button failure", "info", "DragDropMgr");
708 this.stopEvent(e);
709 return this.handleMouseUp(e);
710 } else {
711 if (e.clientX < 0 || e.clientY < 0) {
712 //This will stop the element from leaving the viewport in FF, Opera & Safari
713 //Not turned on yet
714 //YAHOO.log("Either clientX or clientY is negative, stop the event.", "info", "DragDropMgr");
715 //this.stopEvent(e);
716 //return false;
717 }
718 }
720 if (!this.dragThreshMet) {
721 var diffX = Math.abs(this.startX - YAHOO.util.Event.getPageX(e));
722 var diffY = Math.abs(this.startY - YAHOO.util.Event.getPageY(e));
723 // YAHOO.log("diffX: " + diffX + "diffY: " + diffY);
724 if (diffX > this.clickPixelThresh ||
725 diffY > this.clickPixelThresh) {
726 YAHOO.log("pixel threshold met", "info", "DragDropMgr");
727 this.startDrag(this.startX, this.startY);
728 }
729 }
731 if (this.dragThreshMet) {
732 if (dc && dc.events.b4Drag) {
733 dc.b4Drag(e);
734 dc.fireEvent('b4DragEvent', { e: e});
735 }
736 if (dc && dc.events.drag) {
737 dc.onDrag(e);
738 dc.fireEvent('dragEvent', { e: e});
739 }
740 if (dc) {
741 this.fireEvents(e, false);
742 }
743 }
745 this.stopEvent(e);
746 }
747 },
749 /**
750 * Iterates over all of the DragDrop elements to find ones we are
751 * hovering over or dropping on
752 * @method fireEvents
753 * @param {Event} e the event
754 * @param {boolean} isDrop is this a drop op or a mouseover op?
755 * @private
756 * @static
757 */
758 fireEvents: function(e, isDrop) {
759 var dc = this.dragCurrent;
761 // If the user did the mouse up outside of the window, we could
762 // get here even though we have ended the drag.
763 // If the config option dragOnly is true, bail out and don't fire the events
764 if (!dc || dc.isLocked() || dc.dragOnly) {
765 return;
766 }
768 var x = YAHOO.util.Event.getPageX(e),
769 y = YAHOO.util.Event.getPageY(e),
770 pt = new YAHOO.util.Point(x,y),
771 pos = dc.getTargetCoord(pt.x, pt.y),
772 el = dc.getDragEl(),
773 events = ['out', 'over', 'drop', 'enter'],
774 curRegion = new YAHOO.util.Region( pos.y,
775 pos.x + el.offsetWidth,
776 pos.y + el.offsetHeight,
777 pos.x ),
779 oldOvers = [], // cache the previous dragOver array
780 inGroupsObj = {},
781 inGroups = [],
782 data = {
783 outEvts: [],
784 overEvts: [],
785 dropEvts: [],
786 enterEvts: []
787 };
790 // Check to see if the object(s) we were hovering over is no longer
791 // being hovered over so we can fire the onDragOut event
792 for (var i in this.dragOvers) {
794 var ddo = this.dragOvers[i];
796 if (! this.isTypeOfDD(ddo)) {
797 continue;
798 }
799 if (! this.isOverTarget(pt, ddo, this.mode, curRegion)) {
800 data.outEvts.push( ddo );
801 }
803 oldOvers[i] = true;
804 delete this.dragOvers[i];
805 }
807 for (var sGroup in dc.groups) {
808 // YAHOO.log("Processing group " + sGroup);
810 if ("string" != typeof sGroup) {
811 continue;
812 }
814 for (i in this.ids[sGroup]) {
815 var oDD = this.ids[sGroup][i];
816 if (! this.isTypeOfDD(oDD)) {
817 continue;
818 }
820 if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
821 if (this.isOverTarget(pt, oDD, this.mode, curRegion)) {
822 inGroupsObj[sGroup] = true;
823 // look for drop interactions
824 if (isDrop) {
825 data.dropEvts.push( oDD );
826 // look for drag enter and drag over interactions
827 } else {
829 // initial drag over: dragEnter fires
830 if (!oldOvers[oDD.id]) {
831 data.enterEvts.push( oDD );
832 // subsequent drag overs: dragOver fires
833 } else {
834 data.overEvts.push( oDD );
835 }
837 this.dragOvers[oDD.id] = oDD;
838 }
839 }
840 }
841 }
842 }
844 this.interactionInfo = {
845 out: data.outEvts,
846 enter: data.enterEvts,
847 over: data.overEvts,
848 drop: data.dropEvts,
849 point: pt,
850 draggedRegion: curRegion,
851 sourceRegion: this.locationCache[dc.id],
852 validDrop: isDrop
853 };
856 for (var inG in inGroupsObj) {
857 inGroups.push(inG);
858 }
860 // notify about a drop that did not find a target
861 if (isDrop && !data.dropEvts.length) {
862 YAHOO.log(dc.id + " dropped, but not on a target", "info", "DragDropMgr");
863 this.interactionInfo.validDrop = false;
864 if (dc.events.invalidDrop) {
865 dc.onInvalidDrop(e);
866 dc.fireEvent('invalidDropEvent', { e: e });
867 }
868 }
870 for (i = 0; i < events.length; i++) {
871 var tmp = null;
872 if (data[events[i] + 'Evts']) {
873 tmp = data[events[i] + 'Evts'];
874 }
875 if (tmp && tmp.length) {
876 var type = events[i].charAt(0).toUpperCase() + events[i].substr(1),
877 ev = 'onDrag' + type,
878 b4 = 'b4Drag' + type,
879 cev = 'drag' + type + 'Event',
880 check = 'drag' + type;
882 if (this.mode) {
883 YAHOO.log(dc.id + ' ' + ev + ': ' + tmp, "info", "DragDropMgr");
884 if (dc.events[b4]) {
885 dc[b4](e, tmp, inGroups);
886 dc.fireEvent(b4 + 'Event', { event: e, info: tmp, group: inGroups });
887 }
888 if (dc.events[check]) {
889 dc[ev](e, tmp, inGroups);
890 dc.fireEvent(cev, { event: e, info: tmp, group: inGroups });
891 }
892 } else {
893 for (var b = 0, len = tmp.length; b < len; ++b) {
894 YAHOO.log(dc.id + ' ' + ev + ': ' + tmp[b].id, "info", "DragDropMgr");
895 if (dc.events[b4]) {
896 dc[b4](e, tmp[b].id, inGroups[0]);
897 dc.fireEvent(b4 + 'Event', { event: e, info: tmp[b].id, group: inGroups[0] });
898 }
899 if (dc.events[check]) {
900 dc[ev](e, tmp[b].id, inGroups[0]);
901 dc.fireEvent(cev, { event: e, info: tmp[b].id, group: inGroups[0] });
902 }
903 }
904 }
905 }
906 }
907 },
909 /**
910 * Helper function for getting the best match from the list of drag
911 * and drop objects returned by the drag and drop events when we are
912 * in INTERSECT mode. It returns either the first object that the
913 * cursor is over, or the object that has the greatest overlap with
914 * the dragged element.
915 * @method getBestMatch
916 * @param {DragDrop[]} dds The array of drag and drop objects
917 * targeted
918 * @return {DragDrop} The best single match
919 * @static
920 */
921 getBestMatch: function(dds) {
922 var winner = null;
924 var len = dds.length;
926 if (len == 1) {
927 winner = dds[0];
928 } else {
929 // Loop through the targeted items
930 for (var i=0; i<len; ++i) {
931 var dd = dds[i];
932 // If the cursor is over the object, it wins. If the
933 // cursor is over multiple matches, the first one we come
934 // to wins.
935 if (this.mode == this.INTERSECT && dd.cursorIsOver) {
936 winner = dd;
937 break;
938 // Otherwise the object with the most overlap wins
939 } else {
940 if (!winner || !winner.overlap || (dd.overlap &&
941 winner.overlap.getArea() < dd.overlap.getArea())) {
942 winner = dd;
943 }
944 }
945 }
946 }
948 return winner;
949 },
951 /**
952 * Refreshes the cache of the top-left and bottom-right points of the
953 * drag and drop objects in the specified group(s). This is in the
954 * format that is stored in the drag and drop instance, so typical
955 * usage is:
956 * <code>
957 * YAHOO.util.DragDropMgr.refreshCache(ddinstance.groups);
958 * </code>
959 * Alternatively:
960 * <code>
961 * YAHOO.util.DragDropMgr.refreshCache({group1:true, group2:true});
962 * </code>
963 * @TODO this really should be an indexed array. Alternatively this
964 * method could accept both.
965 * @method refreshCache
966 * @param {Object} groups an associative array of groups to refresh
967 * @static
968 */
969 refreshCache: function(groups) {
970 YAHOO.log("refreshing element location cache", "info", "DragDropMgr");
972 // refresh everything if group array is not provided
973 var g = groups || this.ids;
975 for (var sGroup in g) {
976 if ("string" != typeof sGroup) {
977 continue;
978 }
979 for (var i in this.ids[sGroup]) {
980 var oDD = this.ids[sGroup][i];
982 if (this.isTypeOfDD(oDD)) {
983 var loc = this.getLocation(oDD);
984 if (loc) {
985 this.locationCache[oDD.id] = loc;
986 } else {
987 delete this.locationCache[oDD.id];
988 YAHOO.log("Could not get the loc for " + oDD.id, "warn", "DragDropMgr");
989 }
990 }
991 }
992 }
993 },
995 /**
996 * This checks to make sure an element exists and is in the DOM. The
997 * main purpose is to handle cases where innerHTML is used to remove
998 * drag and drop objects from the DOM. IE provides an 'unspecified
999 * error' when trying to access the offsetParent of such an element
1000 * @method verifyEl
1001 * @param {HTMLElement} el the element to check
1002 * @return {boolean} true if the element looks usable
1003 * @static
1004 */
1005 verifyEl: function(el) {
1006 try {
1007 if (el) {
1008 var parent = el.offsetParent;
1009 if (parent) {
1010 return true;
1011 }
1012 }
1013 } catch(e) {
1014 YAHOO.log("detected problem with an element", "info", "DragDropMgr");
1015 }
1017 return false;
1018 },
1020 /**
1021 * Returns a Region object containing the drag and drop element's position
1022 * and size, including the padding configured for it
1023 * @method getLocation
1024 * @param {DragDrop} oDD the drag and drop object to get the
1025 * location for
1026 * @return {YAHOO.util.Region} a Region object representing the total area
1027 * the element occupies, including any padding
1028 * the instance is configured for.
1029 * @static
1030 */
1031 getLocation: function(oDD) {
1032 if (! this.isTypeOfDD(oDD)) {
1033 YAHOO.log(oDD + " is not a DD obj", "info", "DragDropMgr");
1034 return null;
1035 }
1037 var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
1039 try {
1040 pos= YAHOO.util.Dom.getXY(el);
1041 } catch (e) { }
1043 if (!pos) {
1044 YAHOO.log("getXY failed", "info", "DragDropMgr");
1045 return null;
1046 }
1048 x1 = pos[0];
1049 x2 = x1 + el.offsetWidth;
1050 y1 = pos[1];
1051 y2 = y1 + el.offsetHeight;
1053 t = y1 - oDD.padding[0];
1054 r = x2 + oDD.padding[1];
1055 b = y2 + oDD.padding[2];
1056 l = x1 - oDD.padding[3];
1058 return new YAHOO.util.Region( t, r, b, l );
1059 },
1061 /**
1062 * Checks the cursor location to see if it over the target
1063 * @method isOverTarget
1064 * @param {YAHOO.util.Point} pt The point to evaluate
1065 * @param {DragDrop} oTarget the DragDrop object we are inspecting
1066 * @param {boolean} intersect true if we are in intersect mode
1067 * @param {YAHOO.util.Region} pre-cached location of the dragged element
1068 * @return {boolean} true if the mouse is over the target
1069 * @private
1070 * @static
1071 */
1072 isOverTarget: function(pt, oTarget, intersect, curRegion) {
1073 // use cache if available
1074 var loc = this.locationCache[oTarget.id];
1075 if (!loc || !this.useCache) {
1076 YAHOO.log("cache not populated", "info", "DragDropMgr");
1077 loc = this.getLocation(oTarget);
1078 this.locationCache[oTarget.id] = loc;
1080 YAHOO.log("cache: " + loc, "info", "DragDropMgr");
1081 }
1083 if (!loc) {
1084 YAHOO.log("could not get the location of the element", "info", "DragDropMgr");
1085 return false;
1086 }
1088 //YAHOO.log("loc: " + loc + ", pt: " + pt);
1089 oTarget.cursorIsOver = loc.contains( pt );
1091 // DragDrop is using this as a sanity check for the initial mousedown
1092 // in this case we are done. In POINT mode, if the drag obj has no
1093 // contraints, we are done. Otherwise we need to evaluate the
1094 // region the target as occupies to determine if the dragged element
1095 // overlaps with it.
1097 var dc = this.dragCurrent;
1098 if (!dc || (!intersect && !dc.constrainX && !dc.constrainY)) {
1100 //if (oTarget.cursorIsOver) {
1101 //YAHOO.log("over " + oTarget + ", " + loc + ", " + pt, "warn");
1102 //}
1103 return oTarget.cursorIsOver;
1104 }
1106 oTarget.overlap = null;
1108 // Get the current location of the drag element, this is the
1109 // location of the mouse event less the delta that represents
1110 // where the original mousedown happened on the element. We
1111 // need to consider constraints and ticks as well.
1113 if (!curRegion) {
1114 var pos = dc.getTargetCoord(pt.x, pt.y);
1115 var el = dc.getDragEl();
1116 curRegion = new YAHOO.util.Region( pos.y,
1117 pos.x + el.offsetWidth,
1118 pos.y + el.offsetHeight,
1119 pos.x );
1120 }
1122 var overlap = curRegion.intersect(loc);
1124 if (overlap) {
1125 oTarget.overlap = overlap;
1126 return (intersect) ? true : oTarget.cursorIsOver;
1127 } else {
1128 return false;
1129 }
1130 },
1132 /**
1133 * unload event handler
1134 * @method _onUnload
1135 * @private
1136 * @static
1137 */
1138 _onUnload: function(e, me) {
1139 this.unregAll();
1140 },
1142 /**
1143 * Cleans up the drag and drop events and objects.
1144 * @method unregAll
1145 * @private
1146 * @static
1147 */
1148 unregAll: function() {
1149 YAHOO.log("unregister all", "info", "DragDropMgr");
1151 if (this.dragCurrent) {
1152 this.stopDrag();
1153 this.dragCurrent = null;
1154 }
1156 this._execOnAll("unreg", []);
1158 //for (var i in this.elementCache) {
1159 //delete this.elementCache[i];
1160 //}
1161 //this.elementCache = {};
1163 this.ids = {};
1164 },
1166 /**
1167 * A cache of DOM elements
1168 * @property elementCache
1169 * @private
1170 * @static
1171 * @deprecated elements are not cached now
1172 */
1173 elementCache: {},
1175 /**
1176 * Get the wrapper for the DOM element specified
1177 * @method getElWrapper
1178 * @param {String} id the id of the element to get
1179 * @return {YAHOO.util.DDM.ElementWrapper} the wrapped element
1180 * @private
1181 * @deprecated This wrapper isn't that useful
1182 * @static
1183 */
1184 getElWrapper: function(id) {
1185 var oWrapper = this.elementCache[id];
1186 if (!oWrapper || !oWrapper.el) {
1187 oWrapper = this.elementCache[id] =
1188 new this.ElementWrapper(YAHOO.util.Dom.get(id));
1189 }
1190 return oWrapper;
1191 },
1193 /**
1194 * Returns the actual DOM element
1195 * @method getElement
1196 * @param {String} id the id of the elment to get
1197 * @return {Object} The element
1198 * @deprecated use YAHOO.util.Dom.get instead
1199 * @static
1200 */
1201 getElement: function(id) {
1202 return YAHOO.util.Dom.get(id);
1203 },
1205 /**
1206 * Returns the style property for the DOM element (i.e.,
1207 * document.getElById(id).style)
1208 * @method getCss
1209 * @param {String} id the id of the elment to get
1210 * @return {Object} The style property of the element
1211 * @deprecated use YAHOO.util.Dom instead
1212 * @static
1213 */
1214 getCss: function(id) {
1215 var el = YAHOO.util.Dom.get(id);
1216 return (el) ? el.style : null;
1217 },
1219 /**
1220 * Inner class for cached elements
1221 * @class DragDropMgr.ElementWrapper
1222 * @for DragDropMgr
1223 * @private
1224 * @deprecated
1225 */
1226 ElementWrapper: function(el) {
1227 /**
1228 * The element
1229 * @property el
1230 */
1231 this.el = el || null;
1232 /**
1233 * The element id
1234 * @property id
1235 */
1236 this.id = this.el && el.id;
1237 /**
1238 * A reference to the style property
1239 * @property css
1240 */
1241 this.css = this.el && el.style;
1242 },
1244 /**
1245 * Returns the X position of an html element
1246 * @method getPosX
1247 * @param el the element for which to get the position
1248 * @return {int} the X coordinate
1249 * @for DragDropMgr
1250 * @deprecated use YAHOO.util.Dom.getX instead
1251 * @static
1252 */
1253 getPosX: function(el) {
1254 return YAHOO.util.Dom.getX(el);
1255 },
1257 /**
1258 * Returns the Y position of an html element
1259 * @method getPosY
1260 * @param el the element for which to get the position
1261 * @return {int} the Y coordinate
1262 * @deprecated use YAHOO.util.Dom.getY instead
1263 * @static
1264 */
1265 getPosY: function(el) {
1266 return YAHOO.util.Dom.getY(el);
1267 },
1269 /**
1270 * Swap two nodes. In IE, we use the native method, for others we
1271 * emulate the IE behavior
1272 * @method swapNode
1273 * @param n1 the first node to swap
1274 * @param n2 the other node to swap
1275 * @static
1276 */
1277 swapNode: function(n1, n2) {
1278 if (n1.swapNode) {
1279 n1.swapNode(n2);
1280 } else {
1281 var p = n2.parentNode;
1282 var s = n2.nextSibling;
1284 if (s == n1) {
1285 p.insertBefore(n1, n2);
1286 } else if (n2 == n1.nextSibling) {
1287 p.insertBefore(n2, n1);
1288 } else {
1289 n1.parentNode.replaceChild(n2, n1);
1290 p.insertBefore(n1, s);
1291 }
1292 }
1293 },
1295 /**
1296 * Returns the current scroll position
1297 * @method getScroll
1298 * @private
1299 * @static
1300 */
1301 getScroll: function () {
1302 var t, l, dde=document.documentElement, db=document.body;
1303 if (dde && (dde.scrollTop || dde.scrollLeft)) {
1304 t = dde.scrollTop;
1305 l = dde.scrollLeft;
1306 } else if (db) {
1307 t = db.scrollTop;
1308 l = db.scrollLeft;
1309 } else {
1310 YAHOO.log("could not get scroll property", "info", "DragDropMgr");
1311 }
1312 return { top: t, left: l };
1313 },
1315 /**
1316 * Returns the specified element style property
1317 * @method getStyle
1318 * @param {HTMLElement} el the element
1319 * @param {string} styleProp the style property
1320 * @return {string} The value of the style property
1321 * @deprecated use YAHOO.util.Dom.getStyle
1322 * @static
1323 */
1324 getStyle: function(el, styleProp) {
1325 return YAHOO.util.Dom.getStyle(el, styleProp);
1326 },
1328 /**
1329 * Gets the scrollTop
1330 * @method getScrollTop
1331 * @return {int} the document's scrollTop
1332 * @static
1333 */
1334 getScrollTop: function () { return this.getScroll().top; },
1336 /**
1337 * Gets the scrollLeft
1338 * @method getScrollLeft
1339 * @return {int} the document's scrollTop
1340 * @static
1341 */
1342 getScrollLeft: function () { return this.getScroll().left; },
1344 /**
1345 * Sets the x/y position of an element to the location of the
1346 * target element.
1347 * @method moveToEl
1348 * @param {HTMLElement} moveEl The element to move
1349 * @param {HTMLElement} targetEl The position reference element
1350 * @static
1351 */
1352 moveToEl: function (moveEl, targetEl) {
1353 var aCoord = YAHOO.util.Dom.getXY(targetEl);
1354 YAHOO.log("moveToEl: " + aCoord, "info", "DragDropMgr");
1355 YAHOO.util.Dom.setXY(moveEl, aCoord);
1356 },
1358 /**
1359 * Gets the client height
1360 * @method getClientHeight
1361 * @return {int} client height in px
1362 * @deprecated use YAHOO.util.Dom.getViewportHeight instead
1363 * @static
1364 */
1365 getClientHeight: function() {
1366 return YAHOO.util.Dom.getViewportHeight();
1367 },
1369 /**
1370 * Gets the client width
1371 * @method getClientWidth
1372 * @return {int} client width in px
1373 * @deprecated use YAHOO.util.Dom.getViewportWidth instead
1374 * @static
1375 */
1376 getClientWidth: function() {
1377 return YAHOO.util.Dom.getViewportWidth();
1378 },
1380 /**
1381 * Numeric array sort function
1382 * @method numericSort
1383 * @static
1384 */
1385 numericSort: function(a, b) { return (a - b); },
1387 /**
1388 * Internal counter
1389 * @property _timeoutCount
1390 * @private
1391 * @static
1392 */
1393 _timeoutCount: 0,
1395 /**
1396 * Trying to make the load order less important. Without this we get
1397 * an error if this file is loaded before the Event Utility.
1398 * @method _addListeners
1399 * @private
1400 * @static
1401 */
1402 _addListeners: function() {
1403 var DDM = YAHOO.util.DDM;
1404 if ( YAHOO.util.Event && document ) {
1405 DDM._onLoad();
1406 } else {
1407 if (DDM._timeoutCount > 2000) {
1408 YAHOO.log("DragDrop requires the Event Utility", "error", "DragDropMgr");
1409 } else {
1410 setTimeout(DDM._addListeners, 10);
1411 if (document && document.body) {
1412 DDM._timeoutCount += 1;
1413 }
1414 }
1415 }
1416 },
1418 /**
1419 * Recursively searches the immediate parent and all child nodes for
1420 * the handle element in order to determine wheter or not it was
1421 * clicked.
1422 * @method handleWasClicked
1423 * @param node the html element to inspect
1424 * @static
1425 */
1426 handleWasClicked: function(node, id) {
1427 if (this.isHandle(id, node.id)) {
1428 YAHOO.log("clicked node is a handle", "info", "DragDropMgr");
1429 return true;
1430 } else {
1431 // check to see if this is a text node child of the one we want
1432 var p = node.parentNode;
1433 // YAHOO.log("p: " + p);
1435 while (p) {
1436 if (this.isHandle(id, p.id)) {
1437 return true;
1438 } else {
1439 YAHOO.log(p.id + " is not a handle", "info", "DragDropMgr");
1440 p = p.parentNode;
1441 }
1442 }
1443 }
1445 return false;
1446 }
1448 };
1450 }();
1452 // shorter alias, save a few bytes
1453 YAHOO.util.DDM = YAHOO.util.DragDropMgr;
1454 YAHOO.util.DDM._addListeners();
1456 }
1458 (function() {
1460 var Event=YAHOO.util.Event;
1461 var Dom=YAHOO.util.Dom;
1463 /**
1464 * Defines the interface and base operation of items that that can be
1465 * dragged or can be drop targets. It was designed to be extended, overriding
1466 * the event handlers for startDrag, onDrag, onDragOver, onDragOut.
1467 * Up to three html elements can be associated with a DragDrop instance:
1468 * <ul>
1469 * <li>linked element: the element that is passed into the constructor.
1470 * This is the element which defines the boundaries for interaction with
1471 * other DragDrop objects.</li>
1472 * <li>handle element(s): The drag operation only occurs if the element that
1473 * was clicked matches a handle element. By default this is the linked
1474 * element, but there are times that you will want only a portion of the
1475 * linked element to initiate the drag operation, and the setHandleElId()
1476 * method provides a way to define this.</li>
1477 * <li>drag element: this represents an the element that would be moved along
1478 * with the cursor during a drag operation. By default, this is the linked
1479 * element itself as in {@link YAHOO.util.DD}. setDragElId() lets you define
1480 * a separate element that would be moved, as in {@link YAHOO.util.DDProxy}
1481 * </li>
1482 * </ul>
1483 * This class should not be instantiated until the onload event to ensure that
1484 * the associated elements are available.
1485 * The following would define a DragDrop obj that would interact with any
1486 * other DragDrop obj in the "group1" group:
1487 * <pre>
1488 * dd = new YAHOO.util.DragDrop("div1", "group1");
1489 * </pre>
1490 * Since none of the event handlers have been implemented, nothing would
1491 * actually happen if you were to run the code above. Normally you would
1492 * override this class or one of the default implementations, but you can
1493 * also override the methods you want on an instance of the class...
1494 * <pre>
1495 * dd.onDragDrop = function(e, id) {
1496 * alert("dd was dropped on " + id);
1497 * }
1498 * </pre>
1499 * @namespace YAHOO.util
1500 * @class DragDrop
1501 * @constructor
1502 * @param {String} id of the element that is linked to this instance
1503 * @param {String} sGroup the group of related DragDrop objects
1504 * @param {object} config an object containing configurable attributes
1505 * Valid properties for DragDrop:
1506 * padding, isTarget, maintainOffset, primaryButtonOnly,
1507 */
1508 YAHOO.util.DragDrop = function(id, sGroup, config) {
1509 if (id) {
1510 this.init(id, sGroup, config);
1511 }
1512 };
1514 YAHOO.util.DragDrop.prototype = {
1515 /**
1516 * An Object Literal containing the events that we will be using: mouseDown, b4MouseDown, mouseUp, b4StartDrag, startDrag, b4EndDrag, endDrag, mouseUp, drag, b4Drag, invalidDrop, b4DragOut, dragOut, dragEnter, b4DragOver, dragOver, b4DragDrop, dragDrop
1517 * By setting any of these to false, then event will not be fired.
1518 * @property events
1519 * @type object
1520 */
1521 events: null,
1522 /**
1523 * @method on
1524 * @description Shortcut for EventProvider.subscribe, see <a href="YAHOO.util.EventProvider.html#subscribe">YAHOO.util.EventProvider.subscribe</a>
1525 */
1526 on: function() {
1527 this.subscribe.apply(this, arguments);
1528 },
1529 /**
1530 * The id of the element associated with this object. This is what we
1531 * refer to as the "linked element" because the size and position of
1532 * this element is used to determine when the drag and drop objects have
1533 * interacted.
1534 * @property id
1535 * @type String
1536 */
1537 id: null,
1539 /**
1540 * Configuration attributes passed into the constructor
1541 * @property config
1542 * @type object
1543 */
1544 config: null,
1546 /**
1547 * The id of the element that will be dragged. By default this is same
1548 * as the linked element , but could be changed to another element. Ex:
1549 * YAHOO.util.DDProxy
1550 * @property dragElId
1551 * @type String
1552 * @private
1553 */
1554 dragElId: null,
1556 /**
1557 * the id of the element that initiates the drag operation. By default
1558 * this is the linked element, but could be changed to be a child of this
1559 * element. This lets us do things like only starting the drag when the
1560 * header element within the linked html element is clicked.
1561 * @property handleElId
1562 * @type String
1563 * @private
1564 */
1565 handleElId: null,
1567 /**
1568 * An associative array of HTML tags that will be ignored if clicked.
1569 * @property invalidHandleTypes
1570 * @type {string: string}
1571 */
1572 invalidHandleTypes: null,
1574 /**
1575 * An associative array of ids for elements that will be ignored if clicked
1576 * @property invalidHandleIds
1577 * @type {string: string}
1578 */
1579 invalidHandleIds: null,
1581 /**
1582 * An indexted array of css class names for elements that will be ignored
1583 * if clicked.
1584 * @property invalidHandleClasses
1585 * @type string[]
1586 */
1587 invalidHandleClasses: null,
1589 /**
1590 * The linked element's absolute X position at the time the drag was
1591 * started
1592 * @property startPageX
1593 * @type int
1594 * @private
1595 */
1596 startPageX: 0,
1598 /**
1599 * The linked element's absolute X position at the time the drag was
1600 * started
1601 * @property startPageY
1602 * @type int
1603 * @private
1604 */
1605 startPageY: 0,
1607 /**
1608 * The group defines a logical collection of DragDrop objects that are
1609 * related. Instances only get events when interacting with other
1610 * DragDrop object in the same group. This lets us define multiple
1611 * groups using a single DragDrop subclass if we want.
1612 * @property groups
1613 * @type {string: string}
1614 */
1615 groups: null,
1617 /**
1618 * Individual drag/drop instances can be locked. This will prevent
1619 * onmousedown start drag.
1620 * @property locked
1621 * @type boolean
1622 * @private
1623 */
1624 locked: false,
1626 /**
1627 * Lock this instance
1628 * @method lock
1629 */
1630 lock: function() { this.locked = true; },
1632 /**
1633 * Unlock this instace
1634 * @method unlock
1635 */
1636 unlock: function() { this.locked = false; },
1638 /**
1639 * By default, all instances can be a drop target. This can be disabled by
1640 * setting isTarget to false.
1641 * @property isTarget
1642 * @type boolean
1643 */
1644 isTarget: true,
1646 /**
1647 * The padding configured for this drag and drop object for calculating
1648 * the drop zone intersection with this object.
1649 * @property padding
1650 * @type int[]
1651 */
1652 padding: null,
1653 /**
1654 * If this flag is true, do not fire drop events. The element is a drag only element (for movement not dropping)
1655 * @property dragOnly
1656 * @type Boolean
1657 */
1658 dragOnly: false,
1660 /**
1661 * Cached reference to the linked element
1662 * @property _domRef
1663 * @private
1664 */
1665 _domRef: null,
1667 /**
1668 * Internal typeof flag
1669 * @property __ygDragDrop
1670 * @private
1671 */
1672 __ygDragDrop: true,
1674 /**
1675 * Set to true when horizontal contraints are applied
1676 * @property constrainX
1677 * @type boolean
1678 * @private
1679 */
1680 constrainX: false,
1682 /**
1683 * Set to true when vertical contraints are applied
1684 * @property constrainY
1685 * @type boolean
1686 * @private
1687 */
1688 constrainY: false,
1690 /**
1691 * The left constraint
1692 * @property minX
1693 * @type int
1694 * @private
1695 */
1696 minX: 0,
1698 /**
1699 * The right constraint
1700 * @property maxX
1701 * @type int
1702 * @private
1703 */
1704 maxX: 0,
1706 /**
1707 * The up constraint
1708 * @property minY
1709 * @type int
1710 * @type int
1711 * @private
1712 */
1713 minY: 0,
1715 /**
1716 * The down constraint
1717 * @property maxY
1718 * @type int
1719 * @private
1720 */
1721 maxY: 0,
1723 /**
1724 * The difference between the click position and the source element's location
1725 * @property deltaX
1726 * @type int
1727 * @private
1728 */
1729 deltaX: 0,
1731 /**
1732 * The difference between the click position and the source element's location
1733 * @property deltaY
1734 * @type int
1735 * @private
1736 */
1737 deltaY: 0,
1739 /**
1740 * Maintain offsets when we resetconstraints. Set to true when you want
1741 * the position of the element relative to its parent to stay the same
1742 * when the page changes
1743 *
1744 * @property maintainOffset
1745 * @type boolean
1746 */
1747 maintainOffset: false,
1749 /**
1750 * Array of pixel locations the element will snap to if we specified a
1751 * horizontal graduation/interval. This array is generated automatically
1752 * when you define a tick interval.
1753 * @property xTicks
1754 * @type int[]
1755 */
1756 xTicks: null,
1758 /**
1759 * Array of pixel locations the element will snap to if we specified a
1760 * vertical graduation/interval. This array is generated automatically
1761 * when you define a tick interval.
1762 * @property yTicks
1763 * @type int[]
1764 */
1765 yTicks: null,
1767 /**
1768 * By default the drag and drop instance will only respond to the primary
1769 * button click (left button for a right-handed mouse). Set to true to
1770 * allow drag and drop to start with any mouse click that is propogated
1771 * by the browser
1772 * @property primaryButtonOnly
1773 * @type boolean
1774 */
1775 primaryButtonOnly: true,
1777 /**
1778 * The availabe property is false until the linked dom element is accessible.
1779 * @property available
1780 * @type boolean
1781 */
1782 available: false,
1784 /**
1785 * By default, drags can only be initiated if the mousedown occurs in the
1786 * region the linked element is. This is done in part to work around a
1787 * bug in some browsers that mis-report the mousedown if the previous
1788 * mouseup happened outside of the window. This property is set to true
1789 * if outer handles are defined.
1790 *
1791 * @property hasOuterHandles
1792 * @type boolean
1793 * @default false
1794 */
1795 hasOuterHandles: false,
1797 /**
1798 * Property that is assigned to a drag and drop object when testing to
1799 * see if it is being targeted by another dd object. This property
1800 * can be used in intersect mode to help determine the focus of
1801 * the mouse interaction. DDM.getBestMatch uses this property first to
1802 * determine the closest match in INTERSECT mode when multiple targets
1803 * are part of the same interaction.
1804 * @property cursorIsOver
1805 * @type boolean
1806 */
1807 cursorIsOver: false,
1809 /**
1810 * Property that is assigned to a drag and drop object when testing to
1811 * see if it is being targeted by another dd object. This is a region
1812 * that represents the area the draggable element overlaps this target.
1813 * DDM.getBestMatch uses this property to compare the size of the overlap
1814 * to that of other targets in order to determine the closest match in
1815 * INTERSECT mode when multiple targets are part of the same interaction.
1816 * @property overlap
1817 * @type YAHOO.util.Region
1818 */
1819 overlap: null,
1821 /**
1822 * Code that executes immediately before the startDrag event
1823 * @method b4StartDrag
1824 * @private
1825 */
1826 b4StartDrag: function(x, y) { },
1828 /**
1829 * Abstract method called after a drag/drop object is clicked
1830 * and the drag or mousedown time thresholds have beeen met.
1831 * @method startDrag
1832 * @param {int} X click location
1833 * @param {int} Y click location
1834 */
1835 startDrag: function(x, y) { /* override this */ },
1837 /**
1838 * Code that executes immediately before the onDrag event
1839 * @method b4Drag
1840 * @private
1841 */
1842 b4Drag: function(e) { },
1844 /**
1845 * Abstract method called during the onMouseMove event while dragging an
1846 * object.
1847 * @method onDrag
1848 * @param {Event} e the mousemove event
1849 */
1850 onDrag: function(e) { /* override this */ },
1852 /**
1853 * Abstract method called when this element fist begins hovering over
1854 * another DragDrop obj
1855 * @method onDragEnter
1856 * @param {Event} e the mousemove event
1857 * @param {String|DragDrop[]} id In POINT mode, the element
1858 * id this is hovering over. In INTERSECT mode, an array of one or more
1859 * dragdrop items being hovered over.
1860 */
1861 onDragEnter: function(e, id) { /* override this */ },
1863 /**
1864 * Code that executes immediately before the onDragOver event
1865 * @method b4DragOver
1866 * @private
1867 */
1868 b4DragOver: function(e) { },
1870 /**
1871 * Abstract method called when this element is hovering over another
1872 * DragDrop obj
1873 * @method onDragOver
1874 * @param {Event} e the mousemove event
1875 * @param {String|DragDrop[]} id In POINT mode, the element
1876 * id this is hovering over. In INTERSECT mode, an array of dd items
1877 * being hovered over.
1878 */
1879 onDragOver: function(e, id) { /* override this */ },
1881 /**
1882 * Code that executes immediately before the onDragOut event
1883 * @method b4DragOut
1884 * @private
1885 */
1886 b4DragOut: function(e) { },
1888 /**
1889 * Abstract method called when we are no longer hovering over an element
1890 * @method onDragOut
1891 * @param {Event} e the mousemove event
1892 * @param {String|DragDrop[]} id In POINT mode, the element
1893 * id this was hovering over. In INTERSECT mode, an array of dd items
1894 * that the mouse is no longer over.
1895 */
1896 onDragOut: function(e, id) { /* override this */ },
1898 /**
1899 * Code that executes immediately before the onDragDrop event
1900 * @method b4DragDrop
1901 * @private
1902 */
1903 b4DragDrop: function(e) { },
1905 /**
1906 * Abstract method called when this item is dropped on another DragDrop
1907 * obj
1908 * @method onDragDrop
1909 * @param {Event} e the mouseup event
1910 * @param {String|DragDrop[]} id In POINT mode, the element
1911 * id this was dropped on. In INTERSECT mode, an array of dd items this
1912 * was dropped on.
1913 */
1914 onDragDrop: function(e, id) { /* override this */ },
1916 /**
1917 * Abstract method called when this item is dropped on an area with no
1918 * drop target
1919 * @method onInvalidDrop
1920 * @param {Event} e the mouseup event
1921 */
1922 onInvalidDrop: function(e) { /* override this */ },
1924 /**
1925 * Code that executes immediately before the endDrag event
1926 * @method b4EndDrag
1927 * @private
1928 */
1929 b4EndDrag: function(e) { },
1931 /**
1932 * Fired when we are done dragging the object
1933 * @method endDrag
1934 * @param {Event} e the mouseup event
1935 */
1936 endDrag: function(e) { /* override this */ },
1938 /**
1939 * Code executed immediately before the onMouseDown event
1940 * @method b4MouseDown
1941 * @param {Event} e the mousedown event
1942 * @private
1943 */
1944 b4MouseDown: function(e) { },
1946 /**
1947 * Event handler that fires when a drag/drop obj gets a mousedown
1948 * @method onMouseDown
1949 * @param {Event} e the mousedown event
1950 */
1951 onMouseDown: function(e) { /* override this */ },
1953 /**
1954 * Event handler that fires when a drag/drop obj gets a mouseup
1955 * @method onMouseUp
1956 * @param {Event} e the mouseup event
1957 */
1958 onMouseUp: function(e) { /* override this */ },
1960 /**
1961 * Override the onAvailable method to do what is needed after the initial
1962 * position was determined.
1963 * @method onAvailable
1964 */
1965 onAvailable: function () {
1966 //this.logger.log("onAvailable (base)");
1967 },
1969 /**
1970 * Returns a reference to the linked element
1971 * @method getEl
1972 * @return {HTMLElement} the html element
1973 */
1974 getEl: function() {
1975 if (!this._domRef) {
1976 this._domRef = Dom.get(this.id);
1977 }
1979 return this._domRef;
1980 },
1982 /**
1983 * Returns a reference to the actual element to drag. By default this is
1984 * the same as the html element, but it can be assigned to another
1985 * element. An example of this can be found in YAHOO.util.DDProxy
1986 * @method getDragEl
1987 * @return {HTMLElement} the html element
1988 */
1989 getDragEl: function() {
1990 return Dom.get(this.dragElId);
1991 },
1993 /**
1994 * Sets up the DragDrop object. Must be called in the constructor of any
1995 * YAHOO.util.DragDrop subclass
1996 * @method init
1997 * @param id the id of the linked element
1998 * @param {String} sGroup the group of related items
1999 * @param {object} config configuration attributes
2000 */
2001 init: function(id, sGroup, config) {
2002 this.initTarget(id, sGroup, config);
2003 Event.on(this._domRef || this.id, "mousedown",
2004 this.handleMouseDown, this, true);
2006 // Event.on(this.id, "selectstart", Event.preventDefault);
2007 for (var i in this.events) {
2008 this.createEvent(i + 'Event');
2009 }
2011 },
2013 /**
2014 * Initializes Targeting functionality only... the object does not
2015 * get a mousedown handler.
2016 * @method initTarget
2017 * @param id the id of the linked element
2018 * @param {String} sGroup the group of related items
2019 * @param {object} config configuration attributes
2020 */
2021 initTarget: function(id, sGroup, config) {
2023 // configuration attributes
2024 this.config = config || {};
2026 this.events = {};
2028 // create a local reference to the drag and drop manager
2029 this.DDM = YAHOO.util.DDM;
2031 // initialize the groups object
2032 this.groups = {};
2034 // assume that we have an element reference instead of an id if the
2035 // parameter is not a string
2036 if (typeof id !== "string") {
2037 YAHOO.log("id is not a string, assuming it is an HTMLElement");
2038 this._domRef = id;
2039 id = Dom.generateId(id);
2040 }
2042 // set the id
2043 this.id = id;
2045 // add to an interaction group
2046 this.addToGroup((sGroup) ? sGroup : "default");
2048 // We don't want to register this as the handle with the manager
2049 // so we just set the id rather than calling the setter.
2050 this.handleElId = id;
2052 Event.onAvailable(id, this.handleOnAvailable, this, true);
2054 // create a logger instance
2055 this.logger = (YAHOO.widget.LogWriter) ?
2056 new YAHOO.widget.LogWriter(this.toString()) : YAHOO;
2058 // the linked element is the element that gets dragged by default
2059 this.setDragElId(id);
2061 // by default, clicked anchors will not start drag operations.
2062 // @TODO what else should be here? Probably form fields.
2063 this.invalidHandleTypes = { A: "A" };
2064 this.invalidHandleIds = {};
2065 this.invalidHandleClasses = [];
2067 this.applyConfig();
2068 },
2070 /**
2071 * Applies the configuration parameters that were passed into the constructor.
2072 * This is supposed to happen at each level through the inheritance chain. So
2073 * a DDProxy implentation will execute apply config on DDProxy, DD, and
2074 * DragDrop in order to get all of the parameters that are available in
2075 * each object.
2076 * @method applyConfig
2077 */
2078 applyConfig: function() {
2079 this.events = {
2080 mouseDown: true,
2081 b4MouseDown: true,
2082 mouseUp: true,
2083 b4StartDrag: true,
2084 startDrag: true,
2085 b4EndDrag: true,
2086 endDrag: true,
2087 drag: true,
2088 b4Drag: true,
2089 invalidDrop: true,
2090 b4DragOut: true,
2091 dragOut: true,
2092 dragEnter: true,
2093 b4DragOver: true,
2094 dragOver: true,
2095 b4DragDrop: true,
2096 dragDrop: true
2097 };
2099 if (this.config.events) {
2100 for (var i in this.config.events) {
2101 if (this.config.events[i] === false) {
2102 this.events[i] = false;
2103 }
2104 }
2105 }
2108 // configurable properties:
2109 // padding, isTarget, maintainOffset, primaryButtonOnly
2110 this.padding = this.config.padding || [0, 0, 0, 0];
2111 this.isTarget = (this.config.isTarget !== false);
2112 this.maintainOffset = (this.config.maintainOffset);
2113 this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
2114 this.dragOnly = ((this.config.dragOnly === true) ? true : false);
2115 },
2117 /**
2118 * Executed when the linked element is available
2119 * @method handleOnAvailable
2120 * @private
2121 */
2122 handleOnAvailable: function() {
2123 //this.logger.log("handleOnAvailable");
2124 this.available = true;
2125 this.resetConstraints();
2126 this.onAvailable();
2127 },
2129 /**
2130 * Configures the padding for the target zone in px. Effectively expands
2131 * (or reduces) the virtual object size for targeting calculations.
2132 * Supports css-style shorthand; if only one parameter is passed, all sides
2133 * will have that padding, and if only two are passed, the top and bottom
2134 * will have the first param, the left and right the second.
2135 * @method setPadding
2136 * @param {int} iTop Top pad
2137 * @param {int} iRight Right pad
2138 * @param {int} iBot Bot pad
2139 * @param {int} iLeft Left pad
2140 */
2141 setPadding: function(iTop, iRight, iBot, iLeft) {
2142 // this.padding = [iLeft, iRight, iTop, iBot];
2143 if (!iRight && 0 !== iRight) {
2144 this.padding = [iTop, iTop, iTop, iTop];
2145 } else if (!iBot && 0 !== iBot) {
2146 this.padding = [iTop, iRight, iTop, iRight];
2147 } else {
2148 this.padding = [iTop, iRight, iBot, iLeft];
2149 }
2150 },
2152 /**
2153 * Stores the initial placement of the linked element.
2154 * @method setInitialPosition
2155 * @param {int} diffX the X offset, default 0
2156 * @param {int} diffY the Y offset, default 0
2157 * @private
2158 */
2159 setInitPosition: function(diffX, diffY) {
2160 var el = this.getEl();
2162 if (!this.DDM.verifyEl(el)) {
2163 if (el && el.style && (el.style.display == 'none')) {
2164 this.logger.log(this.id + " can not get initial position, element style is display: none");
2165 } else {
2166 this.logger.log(this.id + " element is broken");
2167 }
2168 return;
2169 }
2171 var dx = diffX || 0;
2172 var dy = diffY || 0;
2174 var p = Dom.getXY( el );
2176 this.initPageX = p[0] - dx;
2177 this.initPageY = p[1] - dy;
2179 this.lastPageX = p[0];
2180 this.lastPageY = p[1];
2182 this.logger.log(this.id + " initial position: " + this.initPageX +
2183 ", " + this.initPageY);
2186 this.setStartPosition(p);
2187 },
2189 /**
2190 * Sets the start position of the element. This is set when the obj
2191 * is initialized, the reset when a drag is started.
2192 * @method setStartPosition
2193 * @param pos current position (from previous lookup)
2194 * @private
2195 */
2196 setStartPosition: function(pos) {
2197 var p = pos || Dom.getXY(this.getEl());
2199 this.deltaSetXY = null;
2201 this.startPageX = p[0];
2202 this.startPageY = p[1];
2203 },
2205 /**
2206 * Add this instance to a group of related drag/drop objects. All
2207 * instances belong to at least one group, and can belong to as many
2208 * groups as needed.
2209 * @method addToGroup
2210 * @param sGroup {string} the name of the group
2211 */
2212 addToGroup: function(sGroup) {
2213 this.groups[sGroup] = true;
2214 this.DDM.regDragDrop(this, sGroup);
2215 },
2217 /**
2218 * Remove's this instance from the supplied interaction group
2219 * @method removeFromGroup
2220 * @param {string} sGroup The group to drop
2221 */
2222 removeFromGroup: function(sGroup) {
2223 this.logger.log("Removing from group: " + sGroup);
2224 if (this.groups[sGroup]) {
2225 delete this.groups[sGroup];
2226 }
2228 this.DDM.removeDDFromGroup(this, sGroup);
2229 },
2231 /**
2232 * Allows you to specify that an element other than the linked element
2233 * will be moved with the cursor during a drag
2234 * @method setDragElId
2235 * @param id {string} the id of the element that will be used to initiate the drag
2236 */
2237 setDragElId: function(id) {
2238 this.dragElId = id;
2239 },
2241 /**
2242 * Allows you to specify a child of the linked element that should be
2243 * used to initiate the drag operation. An example of this would be if
2244 * you have a content div with text and links. Clicking anywhere in the
2245 * content area would normally start the drag operation. Use this method
2246 * to specify that an element inside of the content div is the element
2247 * that starts the drag operation.
2248 * @method setHandleElId
2249 * @param id {string} the id of the element that will be used to
2250 * initiate the drag.
2251 */
2252 setHandleElId: function(id) {
2253 if (typeof id !== "string") {
2254 YAHOO.log("id is not a string, assuming it is an HTMLElement");
2255 id = Dom.generateId(id);
2256 }
2257 this.handleElId = id;
2258 this.DDM.regHandle(this.id, id);
2259 },
2261 /**
2262 * Allows you to set an element outside of the linked element as a drag
2263 * handle
2264 * @method setOuterHandleElId
2265 * @param id the id of the element that will be used to initiate the drag
2266 */
2267 setOuterHandleElId: function(id) {
2268 if (typeof id !== "string") {
2269 YAHOO.log("id is not a string, assuming it is an HTMLElement");
2270 id = Dom.generateId(id);
2271 }
2272 this.logger.log("Adding outer handle event: " + id);
2273 Event.on(id, "mousedown",
2274 this.handleMouseDown, this, true);
2275 this.setHandleElId(id);
2277 this.hasOuterHandles = true;
2278 },
2280 /**
2281 * Remove all drag and drop hooks for this element
2282 * @method unreg
2283 */
2284 unreg: function() {
2285 this.logger.log("DragDrop obj cleanup " + this.id);
2286 Event.removeListener(this.id, "mousedown",
2287 this.handleMouseDown);
2288 this._domRef = null;
2289 this.DDM._remove(this);
2290 },
2292 /**
2293 * Returns true if this instance is locked, or the drag drop mgr is locked
2294 * (meaning that all drag/drop is disabled on the page.)
2295 * @method isLocked
2296 * @return {boolean} true if this obj or all drag/drop is locked, else
2297 * false
2298 */
2299 isLocked: function() {
2300 return (this.DDM.isLocked() || this.locked);
2301 },
2303 /**
2304 * Fired when this object is clicked
2305 * @method handleMouseDown
2306 * @param {Event} e
2307 * @param {YAHOO.util.DragDrop} oDD the clicked dd object (this dd obj)
2308 * @private
2309 */
2310 handleMouseDown: function(e, oDD) {
2312 var button = e.which || e.button;
2313 this.logger.log("button: " + button);
2315 if (this.primaryButtonOnly && button > 1) {
2316 this.logger.log("Mousedown was not produced by the primary button");
2317 return;
2318 }
2320 if (this.isLocked()) {
2321 this.logger.log("Drag and drop is disabled, aborting");
2322 return;
2323 }
2325 this.logger.log("mousedown " + this.id);
2327 this.logger.log("firing onMouseDown events");
2329 // firing the mousedown events prior to calculating positions
2330 var b4Return = this.b4MouseDown(e);
2331 if (this.events.b4MouseDown) {
2332 b4Return = this.fireEvent('b4MouseDownEvent', e);
2333 }
2334 var mDownReturn = this.onMouseDown(e);
2335 if (this.events.mouseDown) {
2336 mDownReturn = this.fireEvent('mouseDownEvent', e);
2337 }
2339 if ((b4Return === false) || (mDownReturn === false)) {
2340 this.logger.log('b4MouseDown or onMouseDown returned false, exiting drag');
2341 return;
2342 }
2344 this.DDM.refreshCache(this.groups);
2345 // var self = this;
2346 // setTimeout( function() { self.DDM.refreshCache(self.groups); }, 0);
2348 // Only process the event if we really clicked within the linked
2349 // element. The reason we make this check is that in the case that
2350 // another element was moved between the clicked element and the
2351 // cursor in the time between the mousedown and mouseup events. When
2352 // this happens, the element gets the next mousedown event
2353 // regardless of where on the screen it happened.
2354 var pt = new YAHOO.util.Point(Event.getPageX(e), Event.getPageY(e));
2355 if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {
2356 this.logger.log("Click was not over the element: " + this.id);
2357 } else {
2358 if (this.clickValidator(e)) {
2360 this.logger.log("click was a valid handle");
2362 // set the initial element position
2363 this.setStartPosition();
2365 // start tracking mousemove distance and mousedown time to
2366 // determine when to start the actual drag
2367 this.DDM.handleMouseDown(e, this);
2369 // this mousedown is mine
2370 this.DDM.stopEvent(e);
2371 } else {
2373 this.logger.log("clickValidator returned false, drag not initiated");
2375 }
2376 }
2377 },
2379 /**
2380 * @method clickValidator
2381 * @description Method validates that the clicked element
2382 * was indeed the handle or a valid child of the handle
2383 * @param {Event} e
2384 */
2385 clickValidator: function(e) {
2386 var target = YAHOO.util.Event.getTarget(e);
2387 return ( this.isValidHandleChild(target) &&
2388 (this.id == this.handleElId ||
2389 this.DDM.handleWasClicked(target, this.id)) );
2390 },
2392 /**
2393 * Finds the location the element should be placed if we want to move
2394 * it to where the mouse location less the click offset would place us.
2395 * @method getTargetCoord
2396 * @param {int} iPageX the X coordinate of the click
2397 * @param {int} iPageY the Y coordinate of the click
2398 * @return an object that contains the coordinates (Object.x and Object.y)
2399 * @private
2400 */
2401 getTargetCoord: function(iPageX, iPageY) {
2403 // this.logger.log("getTargetCoord: " + iPageX + ", " + iPageY);
2405 var x = iPageX - this.deltaX;
2406 var y = iPageY - this.deltaY;
2408 if (this.constrainX) {
2409 if (x < this.minX) { x = this.minX; }
2410 if (x > this.maxX) { x = this.maxX; }
2411 }
2413 if (this.constrainY) {
2414 if (y < this.minY) { y = this.minY; }
2415 if (y > this.maxY) { y = this.maxY; }
2416 }
2418 x = this.getTick(x, this.xTicks);
2419 y = this.getTick(y, this.yTicks);
2421 // this.logger.log("getTargetCoord " +
2422 // " iPageX: " + iPageX +
2423 // " iPageY: " + iPageY +
2424 // " x: " + x + ", y: " + y);
2426 return {x:x, y:y};
2427 },
2429 /**
2430 * Allows you to specify a tag name that should not start a drag operation
2431 * when clicked. This is designed to facilitate embedding links within a
2432 * drag handle that do something other than start the drag.
2433 * @method addInvalidHandleType
2434 * @param {string} tagName the type of element to exclude
2435 */
2436 addInvalidHandleType: function(tagName) {
2437 var type = tagName.toUpperCase();
2438 this.invalidHandleTypes[type] = type;
2439 },
2441 /**
2442 * Lets you to specify an element id for a child of a drag handle
2443 * that should not initiate a drag
2444 * @method addInvalidHandleId
2445 * @param {string} id the element id of the element you wish to ignore
2446 */
2447 addInvalidHandleId: function(id) {
2448 if (typeof id !== "string") {
2449 YAHOO.log("id is not a string, assuming it is an HTMLElement");
2450 id = Dom.generateId(id);
2451 }
2452 this.invalidHandleIds[id] = id;
2453 },
2456 /**
2457 * Lets you specify a css class of elements that will not initiate a drag
2458 * @method addInvalidHandleClass
2459 * @param {string} cssClass the class of the elements you wish to ignore
2460 */
2461 addInvalidHandleClass: function(cssClass) {
2462 this.invalidHandleClasses.push(cssClass);
2463 },
2465 /**
2466 * Unsets an excluded tag name set by addInvalidHandleType
2467 * @method removeInvalidHandleType
2468 * @param {string} tagName the type of element to unexclude
2469 */
2470 removeInvalidHandleType: function(tagName) {
2471 var type = tagName.toUpperCase();
2472 // this.invalidHandleTypes[type] = null;
2473 delete this.invalidHandleTypes[type];
2474 },
2476 /**
2477 * Unsets an invalid handle id
2478 * @method removeInvalidHandleId
2479 * @param {string} id the id of the element to re-enable
2480 */
2481 removeInvalidHandleId: function(id) {
2482 if (typeof id !== "string") {
2483 YAHOO.log("id is not a string, assuming it is an HTMLElement");
2484 id = Dom.generateId(id);
2485 }
2486 delete this.invalidHandleIds[id];
2487 },
2489 /**
2490 * Unsets an invalid css class
2491 * @method removeInvalidHandleClass
2492 * @param {string} cssClass the class of the element(s) you wish to
2493 * re-enable
2494 */
2495 removeInvalidHandleClass: function(cssClass) {
2496 for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
2497 if (this.invalidHandleClasses[i] == cssClass) {
2498 delete this.invalidHandleClasses[i];
2499 }
2500 }
2501 },
2503 /**
2504 * Checks the tag exclusion list to see if this click should be ignored
2505 * @method isValidHandleChild
2506 * @param {HTMLElement} node the HTMLElement to evaluate
2507 * @return {boolean} true if this is a valid tag type, false if not
2508 */
2509 isValidHandleChild: function(node) {
2511 var valid = true;
2512 // var n = (node.nodeName == "#text") ? node.parentNode : node;
2513 var nodeName;
2514 try {
2515 nodeName = node.nodeName.toUpperCase();
2516 } catch(e) {
2517 nodeName = node.nodeName;
2518 }
2519 valid = valid && !this.invalidHandleTypes[nodeName];
2520 valid = valid && !this.invalidHandleIds[node.id];
2522 for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
2523 valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
2524 }
2526 this.logger.log("Valid handle? ... " + valid);
2528 return valid;
2530 },
2532 /**
2533 * Create the array of horizontal tick marks if an interval was specified
2534 * in setXConstraint().
2535 * @method setXTicks
2536 * @private
2537 */
2538 setXTicks: function(iStartX, iTickSize) {
2539 this.xTicks = [];
2540 this.xTickSize = iTickSize;
2542 var tickMap = {};
2544 for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
2545 if (!tickMap[i]) {
2546 this.xTicks[this.xTicks.length] = i;
2547 tickMap[i] = true;
2548 }
2549 }
2551 for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
2552 if (!tickMap[i]) {
2553 this.xTicks[this.xTicks.length] = i;
2554 tickMap[i] = true;
2555 }
2556 }
2558 this.xTicks.sort(this.DDM.numericSort) ;
2559 this.logger.log("xTicks: " + this.xTicks.join());
2560 },
2562 /**
2563 * Create the array of vertical tick marks if an interval was specified in
2564 * setYConstraint().
2565 * @method setYTicks
2566 * @private
2567 */
2568 setYTicks: function(iStartY, iTickSize) {
2569 // this.logger.log("setYTicks: " + iStartY + ", " + iTickSize
2570 // + ", " + this.initPageY + ", " + this.minY + ", " + this.maxY );
2571 this.yTicks = [];
2572 this.yTickSize = iTickSize;
2574 var tickMap = {};
2576 for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
2577 if (!tickMap[i]) {
2578 this.yTicks[this.yTicks.length] = i;
2579 tickMap[i] = true;
2580 }
2581 }
2583 for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
2584 if (!tickMap[i]) {
2585 this.yTicks[this.yTicks.length] = i;
2586 tickMap[i] = true;
2587 }
2588 }
2590 this.yTicks.sort(this.DDM.numericSort) ;
2591 this.logger.log("yTicks: " + this.yTicks.join());
2592 },
2594 /**
2595 * By default, the element can be dragged any place on the screen. Use
2596 * this method to limit the horizontal travel of the element. Pass in
2597 * 0,0 for the parameters if you want to lock the drag to the y axis.
2598 * @method setXConstraint
2599 * @param {int} iLeft the number of pixels the element can move to the left
2600 * @param {int} iRight the number of pixels the element can move to the
2601 * right
2602 * @param {int} iTickSize optional parameter for specifying that the
2603 * element
2604 * should move iTickSize pixels at a time.
2605 */
2606 setXConstraint: function(iLeft, iRight, iTickSize) {
2607 this.leftConstraint = parseInt(iLeft, 10);
2608 this.rightConstraint = parseInt(iRight, 10);
2610 this.minX = this.initPageX - this.leftConstraint;
2611 this.maxX = this.initPageX + this.rightConstraint;
2612 if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
2614 this.constrainX = true;
2615 this.logger.log("initPageX:" + this.initPageX + " minX:" + this.minX +
2616 " maxX:" + this.maxX);
2617 },
2619 /**
2620 * Clears any constraints applied to this instance. Also clears ticks
2621 * since they can't exist independent of a constraint at this time.
2622 * @method clearConstraints
2623 */
2624 clearConstraints: function() {
2625 this.logger.log("Clearing constraints");
2626 this.constrainX = false;
2627 this.constrainY = false;
2628 this.clearTicks();
2629 },
2631 /**
2632 * Clears any tick interval defined for this instance
2633 * @method clearTicks
2634 */
2635 clearTicks: function() {
2636 this.logger.log("Clearing ticks");
2637 this.xTicks = null;
2638 this.yTicks = null;
2639 this.xTickSize = 0;
2640 this.yTickSize = 0;
2641 },
2643 /**
2644 * By default, the element can be dragged any place on the screen. Set
2645 * this to limit the vertical travel of the element. Pass in 0,0 for the
2646 * parameters if you want to lock the drag to the x axis.
2647 * @method setYConstraint
2648 * @param {int} iUp the number of pixels the element can move up
2649 * @param {int} iDown the number of pixels the element can move down
2650 * @param {int} iTickSize optional parameter for specifying that the
2651 * element should move iTickSize pixels at a time.
2652 */
2653 setYConstraint: function(iUp, iDown, iTickSize) {
2654 this.logger.log("setYConstraint: " + iUp + "," + iDown + "," + iTickSize);
2655 this.topConstraint = parseInt(iUp, 10);
2656 this.bottomConstraint = parseInt(iDown, 10);
2658 this.minY = this.initPageY - this.topConstraint;
2659 this.maxY = this.initPageY + this.bottomConstraint;
2660 if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
2662 this.constrainY = true;
2664 this.logger.log("initPageY:" + this.initPageY + " minY:" + this.minY +
2665 " maxY:" + this.maxY);
2666 },
2668 /**
2669 * resetConstraints must be called if you manually reposition a dd element.
2670 * @method resetConstraints
2671 */
2672 resetConstraints: function() {
2674 //this.logger.log("resetConstraints");
2676 // Maintain offsets if necessary
2677 if (this.initPageX || this.initPageX === 0) {
2678 //this.logger.log("init pagexy: " + this.initPageX + ", " +
2679 //this.initPageY);
2680 //this.logger.log("last pagexy: " + this.lastPageX + ", " +
2681 //this.lastPageY);
2682 // figure out how much this thing has moved
2683 var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
2684 var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
2686 this.setInitPosition(dx, dy);
2688 // This is the first time we have detected the element's position
2689 } else {
2690 this.setInitPosition();
2691 }
2693 if (this.constrainX) {
2694 this.setXConstraint( this.leftConstraint,
2695 this.rightConstraint,
2696 this.xTickSize );
2697 }
2699 if (this.constrainY) {
2700 this.setYConstraint( this.topConstraint,
2701 this.bottomConstraint,
2702 this.yTickSize );
2703 }
2704 },
2706 /**
2707 * Normally the drag element is moved pixel by pixel, but we can specify
2708 * that it move a number of pixels at a time. This method resolves the
2709 * location when we have it set up like this.
2710 * @method getTick
2711 * @param {int} val where we want to place the object
2712 * @param {int[]} tickArray sorted array of valid points
2713 * @return {int} the closest tick
2714 * @private
2715 */
2716 getTick: function(val, tickArray) {
2718 if (!tickArray) {
2719 // If tick interval is not defined, it is effectively 1 pixel,
2720 // so we return the value passed to us.
2721 return val;
2722 } else if (tickArray[0] >= val) {
2723 // The value is lower than the first tick, so we return the first
2724 // tick.
2725 return tickArray[0];
2726 } else {
2727 for (var i=0, len=tickArray.length; i<len; ++i) {
2728 var next = i + 1;
2729 if (tickArray[next] && tickArray[next] >= val) {
2730 var diff1 = val - tickArray[i];
2731 var diff2 = tickArray[next] - val;
2732 return (diff2 > diff1) ? tickArray[i] : tickArray[next];
2733 }
2734 }
2736 // The value is larger than the last tick, so we return the last
2737 // tick.
2738 return tickArray[tickArray.length - 1];
2739 }
2740 },
2742 /**
2743 * toString method
2744 * @method toString
2745 * @return {string} string representation of the dd obj
2746 */
2747 toString: function() {
2748 return ("DragDrop " + this.id);
2749 }
2751 };
2752 YAHOO.augment(YAHOO.util.DragDrop, YAHOO.util.EventProvider);
2754 /**
2755 * @event mouseDownEvent
2756 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
2757 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2758 */
2760 /**
2761 * @event b4MouseDownEvent
2762 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
2763 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2764 */
2766 /**
2767 * @event mouseUpEvent
2768 * @description Fired from inside DragDropMgr when the drag operation is finished.
2769 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2770 */
2772 /**
2773 * @event b4StartDragEvent
2774 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
2775 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2776 */
2778 /**
2779 * @event startDragEvent
2780 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
2781 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2782 */
2784 /**
2785 * @event b4EndDragEvent
2786 * @description Fires before the endDragEvent. Returning false will cancel.
2787 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2788 */
2790 /**
2791 * @event endDragEvent
2792 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
2793 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2794 */
2796 /**
2797 * @event dragEvent
2798 * @description Occurs every mousemove event while dragging.
2799 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2800 */
2801 /**
2802 * @event b4DragEvent
2803 * @description Fires before the dragEvent.
2804 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2805 */
2806 /**
2807 * @event invalidDropEvent
2808 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
2809 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2810 */
2811 /**
2812 * @event b4DragOutEvent
2813 * @description Fires before the dragOutEvent
2814 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2815 */
2816 /**
2817 * @event dragOutEvent
2818 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
2819 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2820 */
2821 /**
2822 * @event dragEnterEvent
2823 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
2824 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2825 */
2826 /**
2827 * @event b4DragOverEvent
2828 * @description Fires before the dragOverEvent.
2829 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2830 */
2831 /**
2832 * @event dragOverEvent
2833 * @description Fires every mousemove event while over a drag and drop object.
2834 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2835 */
2836 /**
2837 * @event b4DragDropEvent
2838 * @description Fires before the dragDropEvent
2839 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2840 */
2841 /**
2842 * @event dragDropEvent
2843 * @description Fires when the dragged objects is dropped on another.
2844 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
2845 */
2846 })();
2847 /**
2848 * A DragDrop implementation where the linked element follows the
2849 * mouse cursor during a drag.
2850 * @class DD
2851 * @extends YAHOO.util.DragDrop
2852 * @constructor
2853 * @param {String} id the id of the linked element
2854 * @param {String} sGroup the group of related DragDrop items
2855 * @param {object} config an object containing configurable attributes
2856 * Valid properties for DD:
2857 * scroll
2858 */
2859 YAHOO.util.DD = function(id, sGroup, config) {
2860 if (id) {
2861 this.init(id, sGroup, config);
2862 }
2863 };
2865 YAHOO.extend(YAHOO.util.DD, YAHOO.util.DragDrop, {
2867 /**
2868 * When set to true, the utility automatically tries to scroll the browser
2869 * window when a drag and drop element is dragged near the viewport boundary.
2870 * Defaults to true.
2871 * @property scroll
2872 * @type boolean
2873 */
2874 scroll: true,
2876 /**
2877 * Sets the pointer offset to the distance between the linked element's top
2878 * left corner and the location the element was clicked
2879 * @method autoOffset
2880 * @param {int} iPageX the X coordinate of the click
2881 * @param {int} iPageY the Y coordinate of the click
2882 */
2883 autoOffset: function(iPageX, iPageY) {
2884 var x = iPageX - this.startPageX;
2885 var y = iPageY - this.startPageY;
2886 this.setDelta(x, y);
2887 // this.logger.log("autoOffset el pos: " + aCoord + ", delta: " + x + "," + y);
2888 },
2890 /**
2891 * Sets the pointer offset. You can call this directly to force the
2892 * offset to be in a particular location (e.g., pass in 0,0 to set it
2893 * to the center of the object, as done in YAHOO.widget.Slider)
2894 * @method setDelta
2895 * @param {int} iDeltaX the distance from the left
2896 * @param {int} iDeltaY the distance from the top
2897 */
2898 setDelta: function(iDeltaX, iDeltaY) {
2899 this.deltaX = iDeltaX;
2900 this.deltaY = iDeltaY;
2901 this.logger.log("deltaX:" + this.deltaX + ", deltaY:" + this.deltaY);
2902 },
2904 /**
2905 * Sets the drag element to the location of the mousedown or click event,
2906 * maintaining the cursor location relative to the location on the element
2907 * that was clicked. Override this if you want to place the element in a
2908 * location other than where the cursor is.
2909 * @method setDragElPos
2910 * @param {int} iPageX the X coordinate of the mousedown or drag event
2911 * @param {int} iPageY the Y coordinate of the mousedown or drag event
2912 */
2913 setDragElPos: function(iPageX, iPageY) {
2914 // the first time we do this, we are going to check to make sure
2915 // the element has css positioning
2917 var el = this.getDragEl();
2918 this.alignElWithMouse(el, iPageX, iPageY);
2919 },
2921 /**
2922 * Sets the element to the location of the mousedown or click event,
2923 * maintaining the cursor location relative to the location on the element
2924 * that was clicked. Override this if you want to place the element in a
2925 * location other than where the cursor is.
2926 * @method alignElWithMouse
2927 * @param {HTMLElement} el the element to move
2928 * @param {int} iPageX the X coordinate of the mousedown or drag event
2929 * @param {int} iPageY the Y coordinate of the mousedown or drag event
2930 */
2931 alignElWithMouse: function(el, iPageX, iPageY) {
2932 var oCoord = this.getTargetCoord(iPageX, iPageY);
2933 // this.logger.log("****alignElWithMouse : " + el.id + ", " + aCoord + ", " + el.style.display);
2935 if (!this.deltaSetXY) {
2936 var aCoord = [oCoord.x, oCoord.y];
2937 YAHOO.util.Dom.setXY(el, aCoord);
2938 var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
2939 var newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
2941 this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
2942 } else {
2943 YAHOO.util.Dom.setStyle(el, "left", (oCoord.x + this.deltaSetXY[0]) + "px");
2944 YAHOO.util.Dom.setStyle(el, "top", (oCoord.y + this.deltaSetXY[1]) + "px");
2945 }
2947 this.cachePosition(oCoord.x, oCoord.y);
2948 var self = this;
2949 setTimeout(function() {
2950 self.autoScroll.call(self, oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
2951 }, 0);
2952 },
2954 /**
2955 * Saves the most recent position so that we can reset the constraints and
2956 * tick marks on-demand. We need to know this so that we can calculate the
2957 * number of pixels the element is offset from its original position.
2958 * @method cachePosition
2959 * @param iPageX the current x position (optional, this just makes it so we
2960 * don't have to look it up again)
2961 * @param iPageY the current y position (optional, this just makes it so we
2962 * don't have to look it up again)
2963 */
2964 cachePosition: function(iPageX, iPageY) {
2965 if (iPageX) {
2966 this.lastPageX = iPageX;
2967 this.lastPageY = iPageY;
2968 } else {
2969 var aCoord = YAHOO.util.Dom.getXY(this.getEl());
2970 this.lastPageX = aCoord[0];
2971 this.lastPageY = aCoord[1];
2972 }
2973 },
2975 /**
2976 * Auto-scroll the window if the dragged object has been moved beyond the
2977 * visible window boundary.
2978 * @method autoScroll
2979 * @param {int} x the drag element's x position
2980 * @param {int} y the drag element's y position
2981 * @param {int} h the height of the drag element
2982 * @param {int} w the width of the drag element
2983 * @private
2984 */
2985 autoScroll: function(x, y, h, w) {
2987 if (this.scroll) {
2988 // The client height
2989 var clientH = this.DDM.getClientHeight();
2991 // The client width
2992 var clientW = this.DDM.getClientWidth();
2994 // The amt scrolled down
2995 var st = this.DDM.getScrollTop();
2997 // The amt scrolled right
2998 var sl = this.DDM.getScrollLeft();
3000 // Location of the bottom of the element
3001 var bot = h + y;
3003 // Location of the right of the element
3004 var right = w + x;
3006 // The distance from the cursor to the bottom of the visible area,
3007 // adjusted so that we don't scroll if the cursor is beyond the
3008 // element drag constraints
3009 var toBot = (clientH + st - y - this.deltaY);
3011 // The distance from the cursor to the right of the visible area
3012 var toRight = (clientW + sl - x - this.deltaX);
3014 // this.logger.log( " x: " + x + " y: " + y + " h: " + h +
3015 // " clientH: " + clientH + " clientW: " + clientW +
3016 // " st: " + st + " sl: " + sl + " bot: " + bot +
3017 // " right: " + right + " toBot: " + toBot + " toRight: " + toRight);
3019 // How close to the edge the cursor must be before we scroll
3020 // var thresh = (document.all) ? 100 : 40;
3021 var thresh = 40;
3023 // How many pixels to scroll per autoscroll op. This helps to reduce
3024 // clunky scrolling. IE is more sensitive about this ... it needs this
3025 // value to be higher.
3026 var scrAmt = (document.all) ? 80 : 30;
3028 // Scroll down if we are near the bottom of the visible page and the
3029 // obj extends below the crease
3030 if ( bot > clientH && toBot < thresh ) {
3031 window.scrollTo(sl, st + scrAmt);
3032 }
3034 // Scroll up if the window is scrolled down and the top of the object
3035 // goes above the top border
3036 if ( y < st && st > 0 && y - st < thresh ) {
3037 window.scrollTo(sl, st - scrAmt);
3038 }
3040 // Scroll right if the obj is beyond the right border and the cursor is
3041 // near the border.
3042 if ( right > clientW && toRight < thresh ) {
3043 window.scrollTo(sl + scrAmt, st);
3044 }
3046 // Scroll left if the window has been scrolled to the right and the obj
3047 // extends past the left border
3048 if ( x < sl && sl > 0 && x - sl < thresh ) {
3049 window.scrollTo(sl - scrAmt, st);
3050 }
3051 }
3052 },
3054 /*
3055 * Sets up config options specific to this class. Overrides
3056 * YAHOO.util.DragDrop, but all versions of this method through the
3057 * inheritance chain are called
3058 */
3059 applyConfig: function() {
3060 YAHOO.util.DD.superclass.applyConfig.call(this);
3061 this.scroll = (this.config.scroll !== false);
3062 },
3064 /*
3065 * Event that fires prior to the onMouseDown event. Overrides
3066 * YAHOO.util.DragDrop.
3067 */
3068 b4MouseDown: function(e) {
3069 this.setStartPosition();
3070 // this.resetConstraints();
3071 this.autoOffset(YAHOO.util.Event.getPageX(e),
3072 YAHOO.util.Event.getPageY(e));
3073 },
3075 /*
3076 * Event that fires prior to the onDrag event. Overrides
3077 * YAHOO.util.DragDrop.
3078 */
3079 b4Drag: function(e) {
3080 this.setDragElPos(YAHOO.util.Event.getPageX(e),
3081 YAHOO.util.Event.getPageY(e));
3082 },
3084 toString: function() {
3085 return ("DD " + this.id);
3086 }
3088 //////////////////////////////////////////////////////////////////////////
3089 // Debugging ygDragDrop events that can be overridden
3090 //////////////////////////////////////////////////////////////////////////
3091 /*
3092 startDrag: function(x, y) {
3093 this.logger.log(this.id.toString() + " startDrag");
3094 },
3096 onDrag: function(e) {
3097 this.logger.log(this.id.toString() + " onDrag");
3098 },
3100 onDragEnter: function(e, id) {
3101 this.logger.log(this.id.toString() + " onDragEnter: " + id);
3102 },
3104 onDragOver: function(e, id) {
3105 this.logger.log(this.id.toString() + " onDragOver: " + id);
3106 },
3108 onDragOut: function(e, id) {
3109 this.logger.log(this.id.toString() + " onDragOut: " + id);
3110 },
3112 onDragDrop: function(e, id) {
3113 this.logger.log(this.id.toString() + " onDragDrop: " + id);
3114 },
3116 endDrag: function(e) {
3117 this.logger.log(this.id.toString() + " endDrag");
3118 }
3120 */
3122 /**
3123 * @event mouseDownEvent
3124 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
3125 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3126 */
3128 /**
3129 * @event b4MouseDownEvent
3130 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
3131 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3132 */
3134 /**
3135 * @event mouseUpEvent
3136 * @description Fired from inside DragDropMgr when the drag operation is finished.
3137 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3138 */
3140 /**
3141 * @event b4StartDragEvent
3142 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
3143 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3144 */
3146 /**
3147 * @event startDragEvent
3148 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
3149 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3150 */
3152 /**
3153 * @event b4EndDragEvent
3154 * @description Fires before the endDragEvent. Returning false will cancel.
3155 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3156 */
3158 /**
3159 * @event endDragEvent
3160 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
3161 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3162 */
3164 /**
3165 * @event dragEvent
3166 * @description Occurs every mousemove event while dragging.
3167 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3168 */
3169 /**
3170 * @event b4DragEvent
3171 * @description Fires before the dragEvent.
3172 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3173 */
3174 /**
3175 * @event invalidDropEvent
3176 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
3177 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3178 */
3179 /**
3180 * @event b4DragOutEvent
3181 * @description Fires before the dragOutEvent
3182 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3183 */
3184 /**
3185 * @event dragOutEvent
3186 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
3187 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3188 */
3189 /**
3190 * @event dragEnterEvent
3191 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
3192 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3193 */
3194 /**
3195 * @event b4DragOverEvent
3196 * @description Fires before the dragOverEvent.
3197 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3198 */
3199 /**
3200 * @event dragOverEvent
3201 * @description Fires every mousemove event while over a drag and drop object.
3202 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3203 */
3204 /**
3205 * @event b4DragDropEvent
3206 * @description Fires before the dragDropEvent
3207 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3208 */
3209 /**
3210 * @event dragDropEvent
3211 * @description Fires when the dragged objects is dropped on another.
3212 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3213 */
3214 });
3215 /**
3216 * A DragDrop implementation that inserts an empty, bordered div into
3217 * the document that follows the cursor during drag operations. At the time of
3218 * the click, the frame div is resized to the dimensions of the linked html
3219 * element, and moved to the exact location of the linked element.
3220 *
3221 * References to the "frame" element refer to the single proxy element that
3222 * was created to be dragged in place of all DDProxy elements on the
3223 * page.
3224 *
3225 * @class DDProxy
3226 * @extends YAHOO.util.DD
3227 * @constructor
3228 * @param {String} id the id of the linked html element
3229 * @param {String} sGroup the group of related DragDrop objects
3230 * @param {object} config an object containing configurable attributes
3231 * Valid properties for DDProxy in addition to those in DragDrop:
3232 * resizeFrame, centerFrame, dragElId
3233 */
3234 YAHOO.util.DDProxy = function(id, sGroup, config) {
3235 if (id) {
3236 this.init(id, sGroup, config);
3237 this.initFrame();
3238 }
3239 };
3241 /**
3242 * The default drag frame div id
3243 * @property YAHOO.util.DDProxy.dragElId
3244 * @type String
3245 * @static
3246 */
3247 YAHOO.util.DDProxy.dragElId = "ygddfdiv";
3249 YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD, {
3251 /**
3252 * By default we resize the drag frame to be the same size as the element
3253 * we want to drag (this is to get the frame effect). We can turn it off
3254 * if we want a different behavior.
3255 * @property resizeFrame
3256 * @type boolean
3257 */
3258 resizeFrame: true,
3260 /**
3261 * By default the frame is positioned exactly where the drag element is, so
3262 * we use the cursor offset provided by YAHOO.util.DD. Another option that works only if
3263 * you do not have constraints on the obj is to have the drag frame centered
3264 * around the cursor. Set centerFrame to true for this effect.
3265 * @property centerFrame
3266 * @type boolean
3267 */
3268 centerFrame: false,
3270 /**
3271 * Creates the proxy element if it does not yet exist
3272 * @method createFrame
3273 */
3274 createFrame: function() {
3275 var self=this, body=document.body;
3277 if (!body || !body.firstChild) {
3278 setTimeout( function() { self.createFrame(); }, 50 );
3279 return;
3280 }
3282 var div=this.getDragEl(), Dom=YAHOO.util.Dom;
3284 if (!div) {
3285 div = document.createElement("div");
3286 div.id = this.dragElId;
3287 var s = div.style;
3289 s.position = "absolute";
3290 s.visibility = "hidden";
3291 s.cursor = "move";
3292 s.border = "2px solid #aaa";
3293 s.zIndex = 999;
3294 s.height = "25px";
3295 s.width = "25px";
3297 var _data = document.createElement('div');
3298 Dom.setStyle(_data, 'height', '100%');
3299 Dom.setStyle(_data, 'width', '100%');
3300 /**
3301 * If the proxy element has no background-color, then it is considered to the "transparent" by Internet Explorer.
3302 * Since it is "transparent" then the events pass through it to the iframe below.
3303 * So creating a "fake" div inside the proxy element and giving it a background-color, then setting it to an
3304 * opacity of 0, it appears to not be there, however IE still thinks that it is so the events never pass through.
3305 */
3306 Dom.setStyle(_data, 'background-color', '#ccc');
3307 Dom.setStyle(_data, 'opacity', '0');
3308 div.appendChild(_data);
3310 /**
3311 * It seems that IE will fire the mouseup event if you pass a proxy element over a select box
3312 * Placing the IFRAME element inside seems to stop this issue
3313 */
3314 if (YAHOO.env.ua.ie) {
3315 //Only needed for Internet Explorer
3316 var ifr = document.createElement('iframe');
3317 ifr.setAttribute('src', 'javascript:');
3318 ifr.setAttribute('scrolling', 'no');
3319 ifr.setAttribute('frameborder', '0');
3320 div.insertBefore(ifr, div.firstChild);
3321 Dom.setStyle(ifr, 'height', '100%');
3322 Dom.setStyle(ifr, 'width', '100%');
3323 Dom.setStyle(ifr, 'position', 'absolute');
3324 Dom.setStyle(ifr, 'top', '0');
3325 Dom.setStyle(ifr, 'left', '0');
3326 Dom.setStyle(ifr, 'opacity', '0');
3327 Dom.setStyle(ifr, 'zIndex', '-1');
3328 Dom.setStyle(ifr.nextSibling, 'zIndex', '2');
3329 }
3331 // appendChild can blow up IE if invoked prior to the window load event
3332 // while rendering a table. It is possible there are other scenarios
3333 // that would cause this to happen as well.
3334 body.insertBefore(div, body.firstChild);
3335 }
3336 },
3338 /**
3339 * Initialization for the drag frame element. Must be called in the
3340 * constructor of all subclasses
3341 * @method initFrame
3342 */
3343 initFrame: function() {
3344 this.createFrame();
3345 },
3347 applyConfig: function() {
3348 //this.logger.log("DDProxy applyConfig");
3349 YAHOO.util.DDProxy.superclass.applyConfig.call(this);
3351 this.resizeFrame = (this.config.resizeFrame !== false);
3352 this.centerFrame = (this.config.centerFrame);
3353 this.setDragElId(this.config.dragElId || YAHOO.util.DDProxy.dragElId);
3354 },
3356 /**
3357 * Resizes the drag frame to the dimensions of the clicked object, positions
3358 * it over the object, and finally displays it
3359 * @method showFrame
3360 * @param {int} iPageX X click position
3361 * @param {int} iPageY Y click position
3362 * @private
3363 */
3364 showFrame: function(iPageX, iPageY) {
3365 var el = this.getEl();
3366 var dragEl = this.getDragEl();
3367 var s = dragEl.style;
3369 this._resizeProxy();
3371 if (this.centerFrame) {
3372 this.setDelta( Math.round(parseInt(s.width, 10)/2),
3373 Math.round(parseInt(s.height, 10)/2) );
3374 }
3376 this.setDragElPos(iPageX, iPageY);
3378 YAHOO.util.Dom.setStyle(dragEl, "visibility", "visible");
3379 },
3381 /**
3382 * The proxy is automatically resized to the dimensions of the linked
3383 * element when a drag is initiated, unless resizeFrame is set to false
3384 * @method _resizeProxy
3385 * @private
3386 */
3387 _resizeProxy: function() {
3388 if (this.resizeFrame) {
3389 var DOM = YAHOO.util.Dom;
3390 var el = this.getEl();
3391 var dragEl = this.getDragEl();
3393 var bt = parseInt( DOM.getStyle(dragEl, "borderTopWidth" ), 10);
3394 var br = parseInt( DOM.getStyle(dragEl, "borderRightWidth" ), 10);
3395 var bb = parseInt( DOM.getStyle(dragEl, "borderBottomWidth" ), 10);
3396 var bl = parseInt( DOM.getStyle(dragEl, "borderLeftWidth" ), 10);
3398 if (isNaN(bt)) { bt = 0; }
3399 if (isNaN(br)) { br = 0; }
3400 if (isNaN(bb)) { bb = 0; }
3401 if (isNaN(bl)) { bl = 0; }
3403 this.logger.log("proxy size: " + bt + " " + br + " " + bb + " " + bl);
3405 var newWidth = Math.max(0, el.offsetWidth - br - bl);
3406 var newHeight = Math.max(0, el.offsetHeight - bt - bb);
3408 this.logger.log("Resizing proxy element");
3410 DOM.setStyle( dragEl, "width", newWidth + "px" );
3411 DOM.setStyle( dragEl, "height", newHeight + "px" );
3412 }
3413 },
3415 // overrides YAHOO.util.DragDrop
3416 b4MouseDown: function(e) {
3417 this.setStartPosition();
3418 var x = YAHOO.util.Event.getPageX(e);
3419 var y = YAHOO.util.Event.getPageY(e);
3420 this.autoOffset(x, y);
3422 // This causes the autoscroll code to kick off, which means autoscroll can
3423 // happen prior to the check for a valid drag handle.
3424 // this.setDragElPos(x, y);
3425 },
3427 // overrides YAHOO.util.DragDrop
3428 b4StartDrag: function(x, y) {
3429 // show the drag frame
3430 this.logger.log("start drag show frame, x: " + x + ", y: " + y);
3431 this.showFrame(x, y);
3432 },
3434 // overrides YAHOO.util.DragDrop
3435 b4EndDrag: function(e) {
3436 this.logger.log(this.id + " b4EndDrag");
3437 YAHOO.util.Dom.setStyle(this.getDragEl(), "visibility", "hidden");
3438 },
3440 // overrides YAHOO.util.DragDrop
3441 // By default we try to move the element to the last location of the frame.
3442 // This is so that the default behavior mirrors that of YAHOO.util.DD.
3443 endDrag: function(e) {
3444 var DOM = YAHOO.util.Dom;
3445 this.logger.log(this.id + " endDrag");
3446 var lel = this.getEl();
3447 var del = this.getDragEl();
3449 // Show the drag frame briefly so we can get its position
3450 // del.style.visibility = "";
3451 DOM.setStyle(del, "visibility", "");
3453 // Hide the linked element before the move to get around a Safari
3454 // rendering bug.
3455 //lel.style.visibility = "hidden";
3456 DOM.setStyle(lel, "visibility", "hidden");
3457 YAHOO.util.DDM.moveToEl(lel, del);
3458 //del.style.visibility = "hidden";
3459 DOM.setStyle(del, "visibility", "hidden");
3460 //lel.style.visibility = "";
3461 DOM.setStyle(lel, "visibility", "");
3462 },
3464 toString: function() {
3465 return ("DDProxy " + this.id);
3466 }
3467 /**
3468 * @event mouseDownEvent
3469 * @description Provides access to the mousedown event. The mousedown does not always result in a drag operation.
3470 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3471 */
3473 /**
3474 * @event b4MouseDownEvent
3475 * @description Provides access to the mousedown event, before the mouseDownEvent gets fired. Returning false will cancel the drag.
3476 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3477 */
3479 /**
3480 * @event mouseUpEvent
3481 * @description Fired from inside DragDropMgr when the drag operation is finished.
3482 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3483 */
3485 /**
3486 * @event b4StartDragEvent
3487 * @description Fires before the startDragEvent, returning false will cancel the startDrag Event.
3488 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3489 */
3491 /**
3492 * @event startDragEvent
3493 * @description Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
3494 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3495 */
3497 /**
3498 * @event b4EndDragEvent
3499 * @description Fires before the endDragEvent. Returning false will cancel.
3500 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3501 */
3503 /**
3504 * @event endDragEvent
3505 * @description Fires on the mouseup event after a drag has been initiated (startDrag fired).
3506 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3507 */
3509 /**
3510 * @event dragEvent
3511 * @description Occurs every mousemove event while dragging.
3512 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3513 */
3514 /**
3515 * @event b4DragEvent
3516 * @description Fires before the dragEvent.
3517 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3518 */
3519 /**
3520 * @event invalidDropEvent
3521 * @description Fires when the dragged objects is dropped in a location that contains no drop targets.
3522 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3523 */
3524 /**
3525 * @event b4DragOutEvent
3526 * @description Fires before the dragOutEvent
3527 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3528 */
3529 /**
3530 * @event dragOutEvent
3531 * @description Fires when a dragged object is no longer over an object that had the onDragEnter fire.
3532 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3533 */
3534 /**
3535 * @event dragEnterEvent
3536 * @description Occurs when the dragged object first interacts with another targettable drag and drop object.
3537 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3538 */
3539 /**
3540 * @event b4DragOverEvent
3541 * @description Fires before the dragOverEvent.
3542 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3543 */
3544 /**
3545 * @event dragOverEvent
3546 * @description Fires every mousemove event while over a drag and drop object.
3547 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3548 */
3549 /**
3550 * @event b4DragDropEvent
3551 * @description Fires before the dragDropEvent
3552 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3553 */
3554 /**
3555 * @event dragDropEvent
3556 * @description Fires when the dragged objects is dropped on another.
3557 * @type YAHOO.util.CustomEvent See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
3558 */
3560 });
3561 /**
3562 * A DragDrop implementation that does not move, but can be a drop
3563 * target. You would get the same result by simply omitting implementation
3564 * for the event callbacks, but this way we reduce the processing cost of the
3565 * event listener and the callbacks.
3566 * @class DDTarget
3567 * @extends YAHOO.util.DragDrop
3568 * @constructor
3569 * @param {String} id the id of the element that is a drop target
3570 * @param {String} sGroup the group of related DragDrop objects
3571 * @param {object} config an object containing configurable attributes
3572 * Valid properties for DDTarget in addition to those in
3573 * DragDrop:
3574 * none
3575 */
3576 YAHOO.util.DDTarget = function(id, sGroup, config) {
3577 if (id) {
3578 this.initTarget(id, sGroup, config);
3579 }
3580 };
3582 // YAHOO.util.DDTarget.prototype = new YAHOO.util.DragDrop();
3583 YAHOO.extend(YAHOO.util.DDTarget, YAHOO.util.DragDrop, {
3584 toString: function() {
3585 return ("DDTarget " + this.id);
3586 }
3587 });
3588 YAHOO.register("dragdrop", YAHOO.util.DragDropMgr, {version: "2.5.2", build: "1076"});