2 * This is a derivative of the similarly named class in the YUI Library.
3 * The original license:
4 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
5 * Code licensed under the BSD License:
6 * http://developer.yahoo.net/yui/license.txt
11 * @class Ext.dd.DragDrop
12 * Defines the interface and base operation of items that that can be
13 * dragged or can be drop targets. It was designed to be extended, overriding
14 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
15 * Up to three html elements can be associated with a DragDrop instance:
17 * <li>linked element: the element that is passed into the constructor.
18 * This is the element which defines the boundaries for interaction with
19 * other DragDrop objects.</li>
20 * <li>handle element(s): The drag operation only occurs if the element that
21 * was clicked matches a handle element. By default this is the linked
22 * element, but there are times that you will want only a portion of the
23 * linked element to initiate the drag operation, and the setHandleElId()
24 * method provides a way to define this.</li>
25 * <li>drag element: this represents the element that would be moved along
26 * with the cursor during a drag operation. By default, this is the linked
27 * element itself as in {@link Ext.dd.DD}. setDragElId() lets you define
28 * a separate element that would be moved, as in {@link Ext.dd.DDProxy}.
31 * This class should not be instantiated until the onload event to ensure that
32 * the associated elements are available.
33 * The following would define a DragDrop obj that would interact with any
34 * other DragDrop obj in the "group1" group:
36 * dd = new Ext.dd.DragDrop("div1", "group1");
38 * Since none of the event handlers have been implemented, nothing would
39 * actually happen if you were to run the code above. Normally you would
40 * override this class or one of the default implementations, but you can
41 * also override the methods you want on an instance of the class...
43 * dd.onDragDrop = function(e, id) {
44 * alert("dd was dropped on " + id);
48 * @param {String} id of the element that is linked to this instance
49 * @param {String} sGroup the group of related DragDrop objects
50 * @param {object} config an object containing configurable attributes
51 * Valid properties for DragDrop:
52 * padding, isTarget, maintainOffset, primaryButtonOnly
55 Ext.define('Ext.dd.DragDrop', {
56 requires: ['Ext.dd.DragDropManager'],
57 constructor: function(id, sGroup, config) {
59 this.init(id, sGroup, config);
64 * Set to false to enable a DragDrop object to fire drag events while dragging
65 * over its own Element. Defaults to true - DragDrop objects do not by default
66 * fire drag events to themselves.
67 * @property ignoreSelf
72 * The id of the element associated with this object. This is what we
73 * refer to as the "linked element" because the size and position of
74 * this element is used to determine when the drag and drop objects have
82 * Configuration attributes passed into the constructor
89 * The id of the element that will be dragged. By default this is same
90 * as the linked element, but could be changed to another element. Ex:
99 * The ID of the element that initiates the drag operation. By default
100 * this is the linked element, but could be changed to be a child of this
101 * element. This lets us do things like only starting the drag when the
102 * header element within the linked html element is clicked.
103 * @property handleElId
110 * An object who's property names identify HTML tags to be considered invalid as drag handles.
111 * A non-null property value identifies the tag as invalid. Defaults to the
112 * following value which prevents drag operations from being initiated by <a> elements:<pre><code>
116 * @property invalidHandleTypes
119 invalidHandleTypes: null,
122 * An object who's property names identify the IDs of elements to be considered invalid as drag handles.
123 * A non-null property value identifies the ID as invalid. For example, to prevent
124 * dragging from being initiated on element ID "foo", use:<pre><code>
128 * @property invalidHandleIds
131 invalidHandleIds: null,
134 * An Array of CSS class names for elements to be considered in valid as drag handles.
135 * @property invalidHandleClasses
138 invalidHandleClasses: null,
141 * The linked element's absolute X position at the time the drag was
143 * @property startPageX
150 * The linked element's absolute X position at the time the drag was
152 * @property startPageY
159 * The group defines a logical collection of DragDrop objects that are
160 * related. Instances only get events when interacting with other
161 * DragDrop object in the same group. This lets us define multiple
162 * groups using a single DragDrop subclass if we want.
164 * @type object An object in the format {'group1':true, 'group2':true}
169 * Individual drag/drop instances can be locked. This will prevent
170 * onmousedown start drag.
186 * When set to true, other DD objects in cooperating DDGroups do not receive
187 * notification events when this DD object is dragged over them. Defaults to false.
194 * Unlock this instace
202 * By default, all instances can be a drop target. This can be disabled by
203 * setting isTarget to false.
210 * The padding configured for this drag and drop object for calculating
211 * the drop zone intersection with this object.
213 * @type int[] An array containing the 4 padding values: [top, right, bottom, left]
218 * Cached reference to the linked element
225 * Internal typeof flag
226 * @property __ygDragDrop
232 * Set to true when horizontal contraints are applied
233 * @property constrainX
240 * Set to true when vertical contraints are applied
241 * @property constrainY
248 * The left constraint
256 * The right constraint
272 * The down constraint
280 * Maintain offsets when we resetconstraints. Set to true when you want
281 * the position of the element relative to its parent to stay the same
282 * when the page changes
284 * @property maintainOffset
287 maintainOffset: false,
290 * Array of pixel locations the element will snap to if we specified a
291 * horizontal graduation/interval. This array is generated automatically
292 * when you define a tick interval.
299 * Array of pixel locations the element will snap to if we specified a
300 * vertical graduation/interval. This array is generated automatically
301 * when you define a tick interval.
308 * By default the drag and drop instance will only respond to the primary
309 * button click (left button for a right-handed mouse). Set to true to
310 * allow drag and drop to start with any mouse click that is propogated
312 * @property primaryButtonOnly
315 primaryButtonOnly: true,
318 * The available property is false until the linked dom element is accessible.
319 * @property available
325 * By default, drags can only be initiated if the mousedown occurs in the
326 * region the linked element is. This is done in part to work around a
327 * bug in some browsers that mis-report the mousedown if the previous
328 * mouseup happened outside of the window. This property is set to true
329 * if outer handles are defined.
331 * @property hasOuterHandles
335 hasOuterHandles: false,
338 * Code that executes immediately before the startDrag event
339 * @method b4StartDrag
342 b4StartDrag: function(x, y) { },
345 * Abstract method called after a drag/drop object is clicked
346 * and the drag or mousedown time thresholds have beeen met.
348 * @param {int} X click location
349 * @param {int} Y click location
351 startDrag: function(x, y) { /* override this */ },
354 * Code that executes immediately before the onDrag event
358 b4Drag: function(e) { },
361 * Abstract method called during the onMouseMove event while dragging an
364 * @param {Event} e the mousemove event
366 onDrag: function(e) { /* override this */ },
369 * Abstract method called when this element fist begins hovering over
370 * another DragDrop obj
371 * @method onDragEnter
372 * @param {Event} e the mousemove event
373 * @param {String|DragDrop[]} id In POINT mode, the element
374 * id this is hovering over. In INTERSECT mode, an array of one or more
375 * dragdrop items being hovered over.
377 onDragEnter: function(e, id) { /* override this */ },
380 * Code that executes immediately before the onDragOver event
384 b4DragOver: function(e) { },
387 * Abstract method called when this element is hovering over another
390 * @param {Event} e the mousemove event
391 * @param {String|DragDrop[]} id In POINT mode, the element
392 * id this is hovering over. In INTERSECT mode, an array of dd items
393 * being hovered over.
395 onDragOver: function(e, id) { /* override this */ },
398 * Code that executes immediately before the onDragOut event
402 b4DragOut: function(e) { },
405 * Abstract method called when we are no longer hovering over an element
407 * @param {Event} e the mousemove event
408 * @param {String|DragDrop[]} id In POINT mode, the element
409 * id this was hovering over. In INTERSECT mode, an array of dd items
410 * that the mouse is no longer over.
412 onDragOut: function(e, id) { /* override this */ },
415 * Code that executes immediately before the onDragDrop event
419 b4DragDrop: function(e) { },
422 * Abstract method called when this item is dropped on another DragDrop
425 * @param {Event} e the mouseup event
426 * @param {String|DragDrop[]} id In POINT mode, the element
427 * id this was dropped on. In INTERSECT mode, an array of dd items this
430 onDragDrop: function(e, id) { /* override this */ },
433 * Abstract method called when this item is dropped on an area with no
435 * @method onInvalidDrop
436 * @param {Event} e the mouseup event
438 onInvalidDrop: function(e) { /* override this */ },
441 * Code that executes immediately before the endDrag event
445 b4EndDrag: function(e) { },
448 * Fired when we are done dragging the object
450 * @param {Event} e the mouseup event
452 endDrag: function(e) { /* override this */ },
455 * Code executed immediately before the onMouseDown event
456 * @method b4MouseDown
457 * @param {Event} e the mousedown event
460 b4MouseDown: function(e) { },
463 * Event handler that fires when a drag/drop obj gets a mousedown
464 * @method onMouseDown
465 * @param {Event} e the mousedown event
467 onMouseDown: function(e) { /* override this */ },
470 * Event handler that fires when a drag/drop obj gets a mouseup
472 * @param {Event} e the mouseup event
474 onMouseUp: function(e) { /* override this */ },
477 * Override the onAvailable method to do what is needed after the initial
478 * position was determined.
479 * @method onAvailable
481 onAvailable: function () {
485 * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
496 * Initializes the drag drop object's constraints to restrict movement to a certain element.
500 var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
501 { dragElId: "existingProxyDiv" });
502 dd.startDrag = function(){
503 this.constrainTo("parent-id");
506 * Or you can initalize it using the {@link Ext.core.Element} object:
508 Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
509 startDrag : function(){
510 this.constrainTo("parent-id");
514 * @param {Mixed} constrainTo The element to constrain to.
515 * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
516 * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
517 * an object containing the sides to pad. For example: {right:10, bottom:10}
518 * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
520 constrainTo : function(constrainTo, pad, inContent){
521 if(Ext.isNumber(pad)){
522 pad = {left: pad, right:pad, top:pad, bottom:pad};
524 pad = pad || this.defaultPadding;
525 var b = Ext.get(this.getEl()).getBox(),
526 ce = Ext.get(constrainTo),
530 if(cd == document.body){
531 c = { x: s.left, y: s.top, width: Ext.core.Element.getViewWidth(), height: Ext.core.Element.getViewHeight()};
534 c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
538 var topSpace = b.y - c.y,
539 leftSpace = b.x - c.x;
541 this.resetConstraints();
542 this.setXConstraint(leftSpace - (pad.left||0), // left
543 c.width - leftSpace - b.width - (pad.right||0), //right
546 this.setYConstraint(topSpace - (pad.top||0), //top
547 c.height - topSpace - b.height - (pad.bottom||0), //bottom
553 * Returns a reference to the linked element
555 * @return {HTMLElement} the html element
559 this._domRef = Ext.getDom(this.id);
566 * Returns a reference to the actual element to drag. By default this is
567 * the same as the html element, but it can be assigned to another
568 * element. An example of this can be found in Ext.dd.DDProxy
570 * @return {HTMLElement} the html element
572 getDragEl: function() {
573 return Ext.getDom(this.dragElId);
577 * Sets up the DragDrop object. Must be called in the constructor of any
578 * Ext.dd.DragDrop subclass
580 * @param id the id of the linked element
581 * @param {String} sGroup the group of related items
582 * @param {object} config configuration attributes
584 init: function(id, sGroup, config) {
585 this.initTarget(id, sGroup, config);
586 Ext.EventManager.on(this.id, "mousedown", this.handleMouseDown, this);
587 // Ext.EventManager.on(this.id, "selectstart", Event.preventDefault);
591 * Initializes Targeting functionality only... the object does not
592 * get a mousedown handler.
594 * @param id the id of the linked element
595 * @param {String} sGroup the group of related items
596 * @param {object} config configuration attributes
598 initTarget: function(id, sGroup, config) {
600 // configuration attributes
601 this.config = config || {};
603 // create a local reference to the drag and drop manager
604 this.DDMInstance = Ext.dd.DragDropManager;
605 // initialize the groups array
608 // assume that we have an element reference instead of an id if the
609 // parameter is not a string
610 if (typeof id !== "string") {
617 // add to an interaction group
618 this.addToGroup((sGroup) ? sGroup : "default");
620 // We don't want to register this as the handle with the manager
621 // so we just set the id rather than calling the setter.
622 this.handleElId = id;
624 // the linked element is the element that gets dragged by default
625 this.setDragElId(id);
627 // by default, clicked anchors will not start drag operations.
628 this.invalidHandleTypes = { A: "A" };
629 this.invalidHandleIds = {};
630 this.invalidHandleClasses = [];
634 this.handleOnAvailable();
638 * Applies the configuration parameters that were passed into the constructor.
639 * This is supposed to happen at each level through the inheritance chain. So
640 * a DDProxy implentation will execute apply config on DDProxy, DD, and
641 * DragDrop in order to get all of the parameters that are available in
643 * @method applyConfig
645 applyConfig: function() {
647 // configurable properties:
648 // padding, isTarget, maintainOffset, primaryButtonOnly
649 this.padding = this.config.padding || [0, 0, 0, 0];
650 this.isTarget = (this.config.isTarget !== false);
651 this.maintainOffset = (this.config.maintainOffset);
652 this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
657 * Executed when the linked element is available
658 * @method handleOnAvailable
661 handleOnAvailable: function() {
662 this.available = true;
663 this.resetConstraints();
668 * Configures the padding for the target zone in px. Effectively expands
669 * (or reduces) the virtual object size for targeting calculations.
670 * Supports css-style shorthand; if only one parameter is passed, all sides
671 * will have that padding, and if only two are passed, the top and bottom
672 * will have the first param, the left and right the second.
674 * @param {int} iTop Top pad
675 * @param {int} iRight Right pad
676 * @param {int} iBot Bot pad
677 * @param {int} iLeft Left pad
679 setPadding: function(iTop, iRight, iBot, iLeft) {
680 // this.padding = [iLeft, iRight, iTop, iBot];
681 if (!iRight && 0 !== iRight) {
682 this.padding = [iTop, iTop, iTop, iTop];
683 } else if (!iBot && 0 !== iBot) {
684 this.padding = [iTop, iRight, iTop, iRight];
686 this.padding = [iTop, iRight, iBot, iLeft];
691 * Stores the initial placement of the linked element.
692 * @method setInitPosition
693 * @param {int} diffX the X offset, default 0
694 * @param {int} diffY the Y offset, default 0
696 setInitPosition: function(diffX, diffY) {
697 var el = this.getEl();
699 if (!this.DDMInstance.verifyEl(el)) {
706 var p = Ext.core.Element.getXY( el );
708 this.initPageX = p[0] - dx;
709 this.initPageY = p[1] - dy;
711 this.lastPageX = p[0];
712 this.lastPageY = p[1];
714 this.setStartPosition(p);
718 * Sets the start position of the element. This is set when the obj
719 * is initialized, the reset when a drag is started.
720 * @method setStartPosition
721 * @param pos current position (from previous lookup)
724 setStartPosition: function(pos) {
725 var p = pos || Ext.core.Element.getXY( this.getEl() );
726 this.deltaSetXY = null;
728 this.startPageX = p[0];
729 this.startPageY = p[1];
733 * Add this instance to a group of related drag/drop objects. All
734 * instances belong to at least one group, and can belong to as many
737 * @param sGroup {string} the name of the group
739 addToGroup: function(sGroup) {
740 this.groups[sGroup] = true;
741 this.DDMInstance.regDragDrop(this, sGroup);
745 * Remove's this instance from the supplied interaction group
746 * @method removeFromGroup
747 * @param {string} sGroup The group to drop
749 removeFromGroup: function(sGroup) {
750 if (this.groups[sGroup]) {
751 delete this.groups[sGroup];
754 this.DDMInstance.removeDDFromGroup(this, sGroup);
758 * Allows you to specify that an element other than the linked element
759 * will be moved with the cursor during a drag
760 * @method setDragElId
761 * @param id {string} the id of the element that will be used to initiate the drag
763 setDragElId: function(id) {
768 * Allows you to specify a child of the linked element that should be
769 * used to initiate the drag operation. An example of this would be if
770 * you have a content div with text and links. Clicking anywhere in the
771 * content area would normally start the drag operation. Use this method
772 * to specify that an element inside of the content div is the element
773 * that starts the drag operation.
774 * @method setHandleElId
775 * @param id {string} the id of the element that will be used to
778 setHandleElId: function(id) {
779 if (typeof id !== "string") {
782 this.handleElId = id;
783 this.DDMInstance.regHandle(this.id, id);
787 * Allows you to set an element outside of the linked element as a drag
789 * @method setOuterHandleElId
790 * @param id the id of the element that will be used to initiate the drag
792 setOuterHandleElId: function(id) {
793 if (typeof id !== "string") {
796 Ext.EventManager.on(id, "mousedown", this.handleMouseDown, this);
797 this.setHandleElId(id);
799 this.hasOuterHandles = true;
803 * Remove all drag and drop hooks for this element
807 Ext.EventManager.un(this.id, "mousedown", this.handleMouseDown, this);
809 this.DDMInstance._remove(this);
812 destroy : function(){
817 * Returns true if this instance is locked, or the drag drop mgr is locked
818 * (meaning that all drag/drop is disabled on the page.)
820 * @return {boolean} true if this obj or all drag/drop is locked, else
823 isLocked: function() {
824 return (this.DDMInstance.isLocked() || this.locked);
828 * Fired when this object is clicked
829 * @method handleMouseDown
831 * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)
834 handleMouseDown: function(e, oDD){
835 if (this.primaryButtonOnly && e.button != 0) {
839 if (this.isLocked()) {
843 this.DDMInstance.refreshCache(this.groups);
845 var pt = e.getPoint();
846 if (!this.hasOuterHandles && !this.DDMInstance.isOverTarget(pt, this) ) {
848 if (this.clickValidator(e)) {
849 // set the initial element position
850 this.setStartPosition();
854 this.DDMInstance.handleMouseDown(e, this);
856 this.DDMInstance.stopEvent(e);
864 clickValidator: function(e) {
865 var target = e.getTarget();
866 return ( this.isValidHandleChild(target) &&
867 (this.id == this.handleElId ||
868 this.DDMInstance.handleWasClicked(target, this.id)) );
872 * Allows you to specify a tag name that should not start a drag operation
873 * when clicked. This is designed to facilitate embedding links within a
874 * drag handle that do something other than start the drag.
875 * @method addInvalidHandleType
876 * @param {string} tagName the type of element to exclude
878 addInvalidHandleType: function(tagName) {
879 var type = tagName.toUpperCase();
880 this.invalidHandleTypes[type] = type;
884 * Lets you to specify an element id for a child of a drag handle
885 * that should not initiate a drag
886 * @method addInvalidHandleId
887 * @param {string} id the element id of the element you wish to ignore
889 addInvalidHandleId: function(id) {
890 if (typeof id !== "string") {
893 this.invalidHandleIds[id] = id;
897 * Lets you specify a css class of elements that will not initiate a drag
898 * @method addInvalidHandleClass
899 * @param {string} cssClass the class of the elements you wish to ignore
901 addInvalidHandleClass: function(cssClass) {
902 this.invalidHandleClasses.push(cssClass);
906 * Unsets an excluded tag name set by addInvalidHandleType
907 * @method removeInvalidHandleType
908 * @param {string} tagName the type of element to unexclude
910 removeInvalidHandleType: function(tagName) {
911 var type = tagName.toUpperCase();
912 // this.invalidHandleTypes[type] = null;
913 delete this.invalidHandleTypes[type];
917 * Unsets an invalid handle id
918 * @method removeInvalidHandleId
919 * @param {string} id the id of the element to re-enable
921 removeInvalidHandleId: function(id) {
922 if (typeof id !== "string") {
925 delete this.invalidHandleIds[id];
929 * Unsets an invalid css class
930 * @method removeInvalidHandleClass
931 * @param {string} cssClass the class of the element(s) you wish to
934 removeInvalidHandleClass: function(cssClass) {
935 for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
936 if (this.invalidHandleClasses[i] == cssClass) {
937 delete this.invalidHandleClasses[i];
943 * Checks the tag exclusion list to see if this click should be ignored
944 * @method isValidHandleChild
945 * @param {HTMLElement} node the HTMLElement to evaluate
946 * @return {boolean} true if this is a valid tag type, false if not
948 isValidHandleChild: function(node) {
951 // var n = (node.nodeName == "#text") ? node.parentNode : node;
954 nodeName = node.nodeName.toUpperCase();
956 nodeName = node.nodeName;
958 valid = valid && !this.invalidHandleTypes[nodeName];
959 valid = valid && !this.invalidHandleIds[node.id];
961 for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
962 valid = !Ext.fly(node).hasCls(this.invalidHandleClasses[i]);
971 * Create the array of horizontal tick marks if an interval was specified
972 * in setXConstraint().
976 setXTicks: function(iStartX, iTickSize) {
978 this.xTickSize = iTickSize;
982 for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
984 this.xTicks[this.xTicks.length] = i;
989 for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
991 this.xTicks[this.xTicks.length] = i;
996 Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort);
1000 * Create the array of vertical tick marks if an interval was specified in
1005 setYTicks: function(iStartY, iTickSize) {
1007 this.yTickSize = iTickSize;
1011 for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
1013 this.yTicks[this.yTicks.length] = i;
1018 for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
1020 this.yTicks[this.yTicks.length] = i;
1025 Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort);
1029 * By default, the element can be dragged any place on the screen. Use
1030 * this method to limit the horizontal travel of the element. Pass in
1031 * 0,0 for the parameters if you want to lock the drag to the y axis.
1032 * @method setXConstraint
1033 * @param {int} iLeft the number of pixels the element can move to the left
1034 * @param {int} iRight the number of pixels the element can move to the
1036 * @param {int} iTickSize optional parameter for specifying that the
1038 * should move iTickSize pixels at a time.
1040 setXConstraint: function(iLeft, iRight, iTickSize) {
1041 this.leftConstraint = iLeft;
1042 this.rightConstraint = iRight;
1044 this.minX = this.initPageX - iLeft;
1045 this.maxX = this.initPageX + iRight;
1046 if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
1048 this.constrainX = true;
1052 * Clears any constraints applied to this instance. Also clears ticks
1053 * since they can't exist independent of a constraint at this time.
1054 * @method clearConstraints
1056 clearConstraints: function() {
1057 this.constrainX = false;
1058 this.constrainY = false;
1063 * Clears any tick interval defined for this instance
1064 * @method clearTicks
1066 clearTicks: function() {
1074 * By default, the element can be dragged any place on the screen. Set
1075 * this to limit the vertical travel of the element. Pass in 0,0 for the
1076 * parameters if you want to lock the drag to the x axis.
1077 * @method setYConstraint
1078 * @param {int} iUp the number of pixels the element can move up
1079 * @param {int} iDown the number of pixels the element can move down
1080 * @param {int} iTickSize optional parameter for specifying that the
1081 * element should move iTickSize pixels at a time.
1083 setYConstraint: function(iUp, iDown, iTickSize) {
1084 this.topConstraint = iUp;
1085 this.bottomConstraint = iDown;
1087 this.minY = this.initPageY - iUp;
1088 this.maxY = this.initPageY + iDown;
1089 if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
1091 this.constrainY = true;
1096 * resetConstraints must be called if you manually reposition a dd element.
1097 * @method resetConstraints
1098 * @param {boolean} maintainOffset
1100 resetConstraints: function() {
1101 // Maintain offsets if necessary
1102 if (this.initPageX || this.initPageX === 0) {
1103 // figure out how much this thing has moved
1104 var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
1105 var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
1107 this.setInitPosition(dx, dy);
1109 // This is the first time we have detected the element's position
1111 this.setInitPosition();
1114 if (this.constrainX) {
1115 this.setXConstraint( this.leftConstraint,
1116 this.rightConstraint,
1120 if (this.constrainY) {
1121 this.setYConstraint( this.topConstraint,
1122 this.bottomConstraint,
1128 * Normally the drag element is moved pixel by pixel, but we can specify
1129 * that it move a number of pixels at a time. This method resolves the
1130 * location when we have it set up like this.
1132 * @param {int} val where we want to place the object
1133 * @param {int[]} tickArray sorted array of valid points
1134 * @return {int} the closest tick
1137 getTick: function(val, tickArray) {
1139 // If tick interval is not defined, it is effectively 1 pixel,
1140 // so we return the value passed to us.
1142 } else if (tickArray[0] >= val) {
1143 // The value is lower than the first tick, so we return the first
1145 return tickArray[0];
1147 for (var i=0, len=tickArray.length; i<len; ++i) {
1149 if (tickArray[next] && tickArray[next] >= val) {
1150 var diff1 = val - tickArray[i];
1151 var diff2 = tickArray[next] - val;
1152 return (diff2 > diff1) ? tickArray[i] : tickArray[next];
1156 // The value is larger than the last tick, so we return the last
1158 return tickArray[tickArray.length - 1];
1165 * @return {string} string representation of the dd obj
1167 toString: function() {
1168 return ("DragDrop " + this.id);