[extjs.git] / extjs / classic / classic / src / dd / DragDrop.js

/*\r
 * This is a derivative of the similarly named class in the YUI Library.\r
 * The original license:\r
 * Copyright (c) 2006, Yahoo! Inc. All rights reserved.\r
 * Code licensed under the BSD License:\r
 * http://developer.yahoo.net/yui/license.txt\r
 */\r
\r
\r
/**\r
 * Defines the interface and base operation of items that that can be\r
 * dragged or can be drop targets.  It was designed to be extended, overriding\r
 * the event handlers for startDrag, onDrag, onDragOver and onDragOut.\r
 * Up to three html elements can be associated with a DragDrop instance:\r
 *\r
 * - linked element: the element that is passed into the constructor.\r
 *   This is the element which defines the boundaries for interaction with\r
 *   other DragDrop objects.\r
 *\r
 * - handle element(s): The drag operation only occurs if the element that\r
 *   was clicked matches a handle element.  By default this is the linked\r
 *   element, but there are times that you will want only a portion of the\r
 *   linked element to initiate the drag operation, and the setHandleElId()\r
 *   method provides a way to define this.\r
 *\r
 * - drag element: this represents the element that would be moved along\r
 *   with the cursor during a drag operation.  By default, this is the linked\r
 *   element itself as in {@link Ext.dd.DD}.  setDragElId() lets you define\r
 *   a separate element that would be moved, as in {@link Ext.dd.DDProxy}.\r
 *\r
 * This class should not be instantiated until the onload event to ensure that\r
 * the associated elements are available.\r
 * The following would define a DragDrop obj that would interact with any\r
 * other DragDrop obj in the "group1" group:\r
 *\r
 *     dd = new Ext.dd.DragDrop("div1", "group1");\r
 *\r
 * Since none of the event handlers have been implemented, nothing would\r
 * actually happen if you were to run the code above.  Normally you would\r
 * override this class or one of the default implementations, but you can\r
 * also override the methods you want on an instance of the class...\r
 *\r
 *     dd.onDragDrop = function(e, id) {\r
 *         alert("dd was dropped on " + id);\r
 *     }\r
 *\r
 */\r
Ext.define('Ext.dd.DragDrop', {\r
    requires: ['Ext.dd.DragDropManager'],\r
\r
    /**\r
     * Creates new DragDrop.\r
     * @param {String} id of the element that is linked to this instance\r
     * @param {String} sGroup the group of related DragDrop objects\r
     * @param {Object} config an object containing configurable attributes.\r
     * Valid properties for DragDrop:\r
     *\r
     * - padding\r
     * - isTarget\r
     * - maintainOffset\r
     * - primaryButtonOnly\r
     */\r
    constructor: function(id, sGroup, config) {\r
        if(id) {\r
            this.init(id, sGroup, config);\r
        }\r
    },\r
\r
    /**\r
     * @property {Boolean} ignoreSelf\r
     * Set to false to enable a DragDrop object to fire drag events while dragging\r
     * over its own Element. Defaults to true - DragDrop objects do not by default\r
     * fire drag events to themselves.\r
     */\r
\r
    /**\r
     * @property {String} id\r
     * The id of the element associated with this object.  This is what we\r
     * refer to as the "linked element" because the size and position of\r
     * this element is used to determine when the drag and drop objects have\r
     * interacted.\r
     */\r
    id: null,\r
\r
    /**\r
     * @property {Object} config\r
     * Configuration attributes passed into the constructor\r
     */\r
    config: null,\r
\r
    /**\r
     * @property {String} dragElId\r
     * The id of the element that will be dragged.  By default this is same\r
     * as the linked element, but could be changed to another element. Ex:\r
     * Ext.dd.DDProxy\r
     * @private\r
     */\r
    dragElId: null,\r
\r
    /**\r
     * @property {String} handleElId\r
     * The ID of the element that initiates the drag operation.  By default\r
     * this is the linked element, but could be changed to be a child of this\r
     * element.  This lets us do things like only starting the drag when the\r
     * header element within the linked html element is clicked.\r
     * @private\r
     */\r
    handleElId: null,\r
\r
    /**\r
     * @property {Object} invalidHandleTypes\r
     * An object who's property names identify HTML tags to be considered invalid as drag handles.\r
     * A non-null property value identifies the tag as invalid. Defaults to the\r
     * following value which prevents drag operations from being initiated by `<a>` elements:\r
     *\r
     *     {\r
     *         A: "A"\r
     *     }\r
     */\r
    invalidHandleTypes: null,\r
\r
    /**\r
     * @property {Object} invalidHandleIds\r
     * An object who's property names identify the IDs of elements to be considered invalid as drag handles.\r
     * A non-null property value identifies the ID as invalid. For example, to prevent\r
     * dragging from being initiated on element ID "foo", use:\r
     *\r
     *     {\r
     *         foo: true\r
     *     }\r
     */\r
    invalidHandleIds: null,\r
\r
    /**\r
     * @property {String[]} invalidHandleClasses\r
     * An Array of CSS class names for elements to be considered in valid as drag handles.\r
     */\r
    invalidHandleClasses: null,\r
\r
    /**\r
     * @property {Number} startPageX\r
     * The linked element's absolute X position at the time the drag was\r
     * started\r
     * @private\r
     */\r
    startPageX: 0,\r
\r
    /**\r
     * @property {Number} startPageY\r
     * The linked element's absolute X position at the time the drag was\r
     * started\r
     * @private\r
     */\r
    startPageY: 0,\r
\r
    /**\r
     * @property {Object} groups\r
     * The group defines a logical collection of DragDrop objects that are\r
     * related.  Instances only get events when interacting with other\r
     * DragDrop object in the same group.  This lets us define multiple\r
     * groups using a single DragDrop subclass if we want.\r
     *\r
     * An object in the format {'group1':true, 'group2':true}\r
     */\r
    groups: null,\r
\r
    /**\r
     * @property {Boolean} locked\r
     * Individual drag/drop instances can be locked.  This will prevent\r
     * onmousedown start drag.\r
     * @private\r
     */\r
    locked: false,\r
\r
    /**\r
     * Locks this instance\r
     */\r
    lock: function() {\r
        this.locked = true;\r
    },\r
\r
    /**\r
     * @property {Boolean} moveOnly\r
     * When set to true, other DD objects in cooperating DDGroups do not receive\r
     * notification events when this DD object is dragged over them.\r
     */\r
    moveOnly: false,\r
\r
    /**\r
     * Unlocks this instace\r
     */\r
    unlock: function() {\r
        this.locked = false;\r
    },\r
\r
    /**\r
     * @property {Boolean} isTarget\r
     * By default, all instances can be a drop target.  This can be disabled by\r
     * setting isTarget to false.\r
     */\r
    isTarget: true,\r
\r
    /**\r
     * @property {Number[]} padding\r
     * The padding configured for this drag and drop object for calculating\r
     * the drop zone intersection with this object.\r
     * An array containing the 4 padding values: [top, right, bottom, left]\r
     */\r
    padding: null,\r
\r
    /**\r
     * @property _domRef\r
     * Cached reference to the linked element\r
     * @private\r
     */\r
    _domRef: null,\r
\r
    /**\r
     * @property __ygDragDrop\r
     * Internal typeof flag\r
     * @private\r
     */\r
    __ygDragDrop: true,\r
\r
    /**\r
     * @property {Boolean} constrainX\r
     * Set to true when horizontal contraints are applied\r
     * @private\r
     */\r
    constrainX: false,\r
\r
    /**\r
     * @property {Boolean} constrainY\r
     * Set to true when vertical contraints are applied\r
     * @private\r
     */\r
    constrainY: false,\r
\r
    /**\r
     * @property {Number} minX\r
     * The left constraint\r
     * @private\r
     */\r
    minX: 0,\r
\r
    /**\r
     * @property {Number} maxX\r
     * The right constraint\r
     * @private\r
     */\r
    maxX: 0,\r
\r
    /**\r
     * @property {Number} minY\r
     * The up constraint\r
     * @private\r
     */\r
    minY: 0,\r
\r
    /**\r
     * @property {Number} maxY\r
     * The down constraint\r
     * @private\r
     */\r
    maxY: 0,\r
\r
    /**\r
     * @property {Boolean} maintainOffset\r
     * Maintain offsets when we resetconstraints.  Set to true when you want\r
     * the position of the element relative to its parent to stay the same\r
     * when the page changes\r
     */\r
    maintainOffset: false,\r
\r
    /**\r
     * @property {Number[]} xTicks\r
     * Array of pixel locations the element will snap to if we specified a\r
     * horizontal graduation/interval.  This array is generated automatically\r
     * when you define a tick interval.\r
     */\r
    xTicks: null,\r
\r
    /**\r
     * @property {Number[]} yTicks\r
     * Array of pixel locations the element will snap to if we specified a\r
     * vertical graduation/interval.  This array is generated automatically\r
     * when you define a tick interval.\r
     */\r
    yTicks: null,\r
\r
    /**\r
     * @property {Boolean} primaryButtonOnly\r
     * By default the drag and drop instance will only respond to the primary\r
     * button click (left button for a right-handed mouse).  Set to true to\r
     * allow drag and drop to start with any mouse click that is propogated\r
     * by the browser\r
     */\r
    primaryButtonOnly: true,\r
\r
    /**\r
     * @property {Boolean} available\r
     * The available property is false until the linked dom element is accessible.\r
     */\r
    available: false,\r
\r
    /**\r
     * @property {Boolean} hasOuterHandles\r
     * By default, drags can only be initiated if the mousedown occurs in the\r
     * region the linked element is.  This is done in part to work around a\r
     * bug in some browsers that mis-report the mousedown if the previous\r
     * mouseup happened outside of the window.  This property is set to true\r
     * if outer handles are defined. Defaults to false.\r
     */\r
    hasOuterHandles: false,\r
\r
    triggerEvent: 'mousedown',\r
\r
    /**\r
     * Code that executes immediately before the startDrag event\r
     * @private\r
     */\r
    b4StartDrag: function(x, y) { },\r
\r
    /**\r
     * Abstract method called after a drag/drop object is clicked\r
     * and the drag or mousedown time thresholds have beeen met.\r
     * @param {Number} x X click location\r
     * @param {Number} y Y click location\r
     */\r
    startDrag: function(x, y) { /* override this */ },\r
\r
    /**\r
     * Code that executes immediately before the onDrag event\r
     * @private\r
     */\r
    b4Drag: function(e) { },\r
\r
    /**\r
     * Abstract method called during the onMouseMove event while dragging an\r
     * object.\r
     * @param {Event} e the mousemove event\r
     */\r
    onDrag: function(e) { /* override this */ },\r
\r
    /**\r
     * Abstract method called when this element fist begins hovering over\r
     * another DragDrop obj\r
     * @param {Event} e the mousemove event\r
     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element\r
     * id this is hovering over.  In INTERSECT mode, an array of one or more\r
     * dragdrop items being hovered over.\r
     */\r
    onDragEnter: function(e, id) { /* override this */ },\r
\r
    /**\r
     * Code that executes immediately before the onDragOver event\r
     * @private\r
     */\r
    b4DragOver: function(e) { },\r
\r
    /**\r
     * Abstract method called when this element is hovering over another\r
     * DragDrop obj\r
     * @param {Event} e the mousemove event\r
     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element\r
     * id this is hovering over.  In INTERSECT mode, an array of dd items\r
     * being hovered over.\r
     */\r
    onDragOver: function(e, id) { /* override this */ },\r
\r
    /**\r
     * Code that executes immediately before the onDragOut event\r
     * @private\r
     */\r
    b4DragOut: function(e) { },\r
\r
    /**\r
     * Abstract method called when we are no longer hovering over an element\r
     * @param {Event} e the mousemove event\r
     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element\r
     * id this was hovering over.  In INTERSECT mode, an array of dd items\r
     * that the mouse is no longer over.\r
     */\r
    onDragOut: function(e, id) { /* override this */ },\r
\r
    /**\r
     * Code that executes immediately before the onDragDrop event\r
     * @private\r
     */\r
    b4DragDrop: function(e) { },\r
\r
    /**\r
     * Abstract method called when this item is dropped on another DragDrop\r
     * obj\r
     * @param {Event} e the mouseup event\r
     * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element\r
     * id this was dropped on.  In INTERSECT mode, an array of dd items this\r
     * was dropped on.\r
     */\r
    onDragDrop: function(e, id) { /* override this */ },\r
\r
    /**\r
     * Abstract method called when this item is dropped on an area with no\r
     * drop target\r
     * @param {Event} e the mouseup event\r
     */\r
    onInvalidDrop: function(e) { /* override this */ },\r
\r
    /**\r
     * Code that executes immediately before the endDrag event\r
     * @private\r
     */\r
    b4EndDrag: function(e) { },\r
\r
    /**\r
     * Called when we are done dragging the object\r
     * @param {Event} e the mouseup event\r
     */\r
    endDrag: function(e) { /* override this */ },\r
\r
    /**\r
     * Code executed immediately before the onMouseDown event\r
     * @param {Event} e the mousedown event\r
     * @private\r
     */\r
    b4MouseDown: function(e) {  },\r
\r
    /**\r
     * Called when a drag/drop obj gets a mousedown\r
     * @param {Event} e the mousedown event\r
     */\r
    onMouseDown: function(e) { /* override this */ },\r
\r
    /**\r
     * Called when a drag/drop obj gets a mouseup\r
     * @param {Event} e the mouseup event\r
     */\r
    onMouseUp: function(e) { /* override this */ },\r
\r
    /**\r
     * Override the onAvailable method to do what is needed after the initial\r
     * position was determined.\r
     */\r
    onAvailable: function () {\r
    },\r
\r
    /**\r
     * @property {Object} defaultPadding\r
     * Provides default constraint padding to "constrainTo" elements.\r
     */\r
    defaultPadding: {\r
        left: 0,\r
        right: 0,\r
        top: 0,\r
        bottom: 0\r
    },\r
\r
    /**\r
     * Initializes the drag drop object's constraints to restrict movement to a certain element.\r
     *\r
     * Usage:\r
     *\r
     *     var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",\r
     *                    { dragElId: "existingProxyDiv" });\r
     *     dd.startDrag = function(){\r
     *         this.constrainTo("parent-id");\r
     *     };\r
     *\r
     * Or you can initalize it using the {@link Ext.dom.Element} object:\r
     *\r
     *     Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {\r
     *         startDrag : function(){\r
     *             this.constrainTo("parent-id");\r
     *         }\r
     *     });\r
     *\r
     * @param {String/HTMLElement/Ext.dom.Element} constrainTo The element or element ID to constrain to.\r
     * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,\r
     * and can be either a number for symmetrical padding (4 would be equal to `{left:4, right:4, top:4, bottom:4}`) or\r
     * an object containing the sides to pad. For example: `{right:10, bottom:10}`\r
     * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)\r
     */\r
    constrainTo : function(constrainTo, pad, inContent){\r
        if (Ext.isNumber(pad)) {\r
            pad = {left: pad, right:pad, top:pad, bottom:pad};\r
        }\r
        pad = pad || this.defaultPadding;\r
        var ddBox = Ext.get(this.getEl()).getBox(),\r
            constrainEl = Ext.get(constrainTo),\r
            s = constrainEl.getScroll(),\r
            c,\r
            constrainDom = constrainEl.dom,\r
            xy,\r
            topSpace,\r
            leftSpace;\r
\r
        if (constrainDom === document.body) {\r
            c = {\r
                x: s.left,\r
                y: s.top,\r
                width: Ext.Element.getViewportWidth(),\r
                height: Ext.Element.getViewportHeight()\r
            };\r
        } else {\r
            xy = constrainEl.getXY();\r
            c = {\r
                x : xy[0],\r
                y: xy[1],\r
                width: constrainDom.clientWidth,\r
                height: constrainDom.clientHeight\r
            };\r
        }\r
\r
        topSpace = ddBox.y - c.y;\r
        leftSpace = ddBox.x - c.x;\r
\r
        this.resetConstraints();\r
        this.setXConstraint(leftSpace - (pad.left||0), // left\r
            c.width - leftSpace - ddBox.width - (pad.right||0), //right\r
            this.xTickSize\r
        );\r
        this.setYConstraint(topSpace - (pad.top||0), //top\r
            c.height - topSpace - ddBox.height - (pad.bottom||0), //bottom\r
            this.yTickSize\r
        );\r
    },\r
\r
    /**\r
     * Returns a reference to the linked element\r
     * @return {HTMLElement} the html element\r
     */\r
    getEl: function() {\r
        if (!this._domRef) {\r
            this._domRef = Ext.getDom(this.id);\r
        }\r
\r
        return this._domRef;\r
    },\r
\r
    /**\r
     * Returns a reference to the actual element to drag.  By default this is\r
     * the same as the html element, but it can be assigned to another\r
     * element. An example of this can be found in Ext.dd.DDProxy\r
     * @return {HTMLElement} the html element\r
     */\r
    getDragEl: function() {\r
        return Ext.getDom(this.dragElId);\r
    },\r
\r
    /**\r
     * Sets up the DragDrop object.  Must be called in the constructor of any\r
     * Ext.dd.DragDrop subclass\r
     * @param {String} id the id of the linked element\r
     * @param {String} sGroup the group of related items\r
     * @param {Object} config configuration attributes\r
     */\r
    init: function(id, sGroup, config) {\r
        var me = this;\r
\r
        me.el = me.el || Ext.get(id); // subclass may have already set "el"\r
\r
        me.initTarget(id, sGroup, config);\r
        Ext.get(me.id).on(me.triggerEvent, me.handleMouseDown, me);\r
    },\r
\r
    /**\r
     * Initializes Targeting functionality only... the object does not\r
     * get a mousedown handler.\r
     * @param {String} id the id of the linked element\r
     * @param {String} sGroup the group of related items\r
     * @param {Object} config configuration attributes\r
     */\r
    initTarget: function(id, sGroup, config) {\r
        // configuration attributes\r
        this.config = config || {};\r
\r
        // create a local reference to the drag and drop manager\r
        this.DDMInstance = Ext.dd.DragDropManager;\r
        // initialize the groups array\r
        this.groups = {};\r
\r
        // assume that we have an element reference instead of an id if the\r
        // parameter is not a string\r
        if (typeof id !== "string") {\r
            id = Ext.id(id);\r
        }\r
\r
        // set the id\r
        this.id = id;\r
\r
        // add to an interaction group\r
        this.addToGroup((sGroup) ? sGroup : "default");\r
\r
        // We don't want to register this as the handle with the manager\r
        // so we just set the id rather than calling the setter.\r
        this.handleElId = id;\r
\r
        // the linked element is the element that gets dragged by default\r
        this.setDragElId(id);\r
\r
        // by default, clicked anchors will not start drag operations.\r
        this.invalidHandleTypes = { A: "A" };\r
        this.invalidHandleIds = {};\r
        this.invalidHandleClasses = [];\r
\r
        this.applyConfig();\r
\r
        this.handleOnAvailable();\r
    },\r
\r
    /**\r
     * Applies the configuration parameters that were passed into the constructor.\r
     * This is supposed to happen at each level through the inheritance chain.  So\r
     * a DDProxy implentation will execute apply config on DDProxy, DD, and\r
     * DragDrop in order to get all of the parameters that are available in\r
     * each object.\r
     */\r
    applyConfig: function() {\r
\r
        // configurable properties:\r
        //    padding, isTarget, maintainOffset, primaryButtonOnly\r
        this.padding           = this.config.padding || [0, 0, 0, 0];\r
        this.isTarget          = (this.config.isTarget !== false);\r
        this.maintainOffset    = (this.config.maintainOffset);\r
        this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);\r
    },\r
    \r
    /**\r
     * Executed when the linked element is available\r
     * @private\r
     */\r
    handleOnAvailable: function() {\r
        this.available = true;\r
        this.resetConstraints();\r
        this.onAvailable();\r
    },\r
    \r
    /**\r
     * Configures the padding for the target zone in px.  Effectively expands\r
     * (or reduces) the virtual object size for targeting calculations.\r
     * Supports css-style shorthand; if only one parameter is passed, all sides\r
     * will have that padding, and if only two are passed, the top and bottom\r
     * will have the first param, the left and right the second.\r
     * @param {Number} iTop    Top pad\r
     * @param {Number} iRight  Right pad\r
     * @param {Number} iBot    Bot pad\r
     * @param {Number} iLeft   Left pad\r
     */\r
    setPadding: function(iTop, iRight, iBot, iLeft) {\r
        // this.padding = [iLeft, iRight, iTop, iBot];\r
        if (!iRight && 0 !== iRight) {\r
            this.padding = [iTop, iTop, iTop, iTop];\r
        } else if (!iBot && 0 !== iBot) {\r
            this.padding = [iTop, iRight, iTop, iRight];\r
        } else {\r
            this.padding = [iTop, iRight, iBot, iLeft];\r
        }\r
    },\r
\r
    /**\r
     * Stores the initial placement of the linked element.\r
     * @param {Number} diffX   the X offset, default 0\r
     * @param {Number} diffY   the Y offset, default 0\r
     */\r
    setInitPosition: function(diffX, diffY) {\r
        var el = this.getEl(),\r
            dx, dy, p;\r
\r
        if (!this.DDMInstance.verifyEl(el)) {\r
            return;\r
        }\r
\r
        dx = diffX || 0;\r
        dy = diffY || 0;\r
\r
        p = Ext.fly(el).getXY();\r
\r
        this.initPageX = p[0] - dx;\r
        this.initPageY = p[1] - dy;\r
\r
        this.lastPageX = p[0];\r
        this.lastPageY = p[1];\r
\r
        this.setStartPosition(p);\r
    },\r
\r
    /**\r
     * Sets the start position of the element.  This is set when the obj\r
     * is initialized, the reset when a drag is started.\r
     * @param pos current position (from previous lookup)\r
     * @private\r
     */\r
    setStartPosition: function(pos) {\r
        var p = pos || Ext.fly(this.getEl()).getXY();\r
        this.deltaSetXY = null;\r
\r
        this.startPageX = p[0];\r
        this.startPageY = p[1];\r
    },\r
\r
    /**\r
     * Adds this instance to a group of related drag/drop objects.  All\r
     * instances belong to at least one group, and can belong to as many\r
     * groups as needed.\r
     * @param {String} sGroup the name of the group\r
     */\r
    addToGroup: function(sGroup) {\r
        this.groups[sGroup] = true;\r
        this.DDMInstance.regDragDrop(this, sGroup);\r
    },\r
\r
    /**\r
     * Removes this instance from the supplied interaction group\r
     * @param {String} sGroup  The group to drop\r
     */\r
    removeFromGroup: function(sGroup) {\r
        if (this.groups[sGroup]) {\r
            delete this.groups[sGroup];\r
        }\r
\r
        this.DDMInstance.removeDDFromGroup(this, sGroup);\r
    },\r
\r
    /**\r
     * Allows you to specify that an element other than the linked element\r
     * will be moved with the cursor during a drag\r
     * @param {String} id the id of the element that will be used to initiate the drag\r
     */\r
    setDragElId: function(id) {\r
        this.dragElId = id;\r
    },\r
\r
    /**\r
     * Allows you to specify a child of the linked element that should be\r
     * used to initiate the drag operation.  An example of this would be if\r
     * you have a content div with text and links.  Clicking anywhere in the\r
     * content area would normally start the drag operation.  Use this method\r
     * to specify that an element inside of the content div is the element\r
     * that starts the drag operation.\r
     * @param {String} id the id of the element that will be used to\r
     * initiate the drag.\r
     */\r
    setHandleElId: function(id) {\r
        if (typeof id !== "string") {\r
            id = Ext.id(id);\r
        }\r
        this.handleElId = id;\r
        this.DDMInstance.regHandle(this.id, id);\r
    },\r
\r
    /**\r
     * Allows you to set an element outside of the linked element as a drag\r
     * handle\r
     * @param {String} id the id of the element that will be used to initiate the drag\r
     */\r
    setOuterHandleElId: function(id) {\r
        if (typeof id !== "string") {\r
            id = Ext.id(id);\r
        }\r
        Ext.get(id).on(this.triggerEvent, this.handleMouseDown, this);\r
        this.setHandleElId(id);\r
\r
        this.hasOuterHandles = true;\r
    },\r
\r
    /**\r
     * Removes all drag and drop hooks for this element\r
     */\r
    unreg: function() {\r
        var me = this,\r
            el;\r
        \r
        if (me._domRef) {\r
            el = Ext.fly(me.id);\r
            if (el) {\r
                el.un(me.triggerEvent, me.handleMouseDown, me);\r
            }\r
        }\r
        me._domRef = null;\r
        me.DDMInstance._remove(me, me.autoGroup);\r
    },\r
\r
    destroy: function() {\r
        this.unreg();\r
        this.callParent();\r
    },\r
\r
    /**\r
     * Returns true if this instance is locked, or the drag drop mgr is locked\r
     * (meaning that all drag/drop is disabled on the page.)\r
     * @return {Boolean} true if this obj or all drag/drop is locked, else\r
     * false\r
     */\r
    isLocked: function() {\r
        return (this.DDMInstance.isLocked() || this.locked);\r
    },\r
\r
    /**\r
     * Called when this object is clicked\r
     * @param {Event} e\r
     * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)\r
     * @private\r
     */\r
    handleMouseDown: function(e, oDD){\r
        var me = this;\r
\r
        if ((me.primaryButtonOnly && e.button) || me.isLocked()) {\r
            return;\r
        }\r
\r
        me.DDMInstance.refreshCache(me.groups);\r
\r
        if (me.hasOuterHandles || me.DDMInstance.isOverTarget(e.getPoint(), me))  {\r
            if (me.clickValidator(e)) {\r
                // set the initial element position\r
                me.setStartPosition();\r
                me.b4MouseDown(e);\r
                me.onMouseDown(e);\r
\r
                me.DDMInstance.handleMouseDown(e, me);\r
\r
                me.DDMInstance.stopEvent(e);\r
            }\r
        }\r
    },\r
\r
    clickValidator: function(e) {\r
        var target = e.getTarget();\r
        return ( this.isValidHandleChild(target) &&\r
                    (this.id === this.handleElId ||\r
                        this.DDMInstance.handleWasClicked(target, this.id)) );\r
    },\r
\r
    /**\r
     * Allows you to specify a tag name that should not start a drag operation\r
     * when clicked.  This is designed to facilitate embedding links within a\r
     * drag handle that do something other than start the drag.\r
     * @method addInvalidHandleType\r
     * @param {String} tagName the type of element to exclude\r
     */\r
    addInvalidHandleType: function(tagName) {\r
        var type = tagName.toUpperCase();\r
        this.invalidHandleTypes[type] = type;\r
    },\r
\r
    /**\r
     * Lets you to specify an element id for a child of a drag handle\r
     * that should not initiate a drag\r
     * @method addInvalidHandleId\r
     * @param {String} id the element id of the element you wish to ignore\r
     */\r
    addInvalidHandleId: function(id) {\r
        if (typeof id !== "string") {\r
            id = Ext.id(id);\r
        }\r
        this.invalidHandleIds[id] = id;\r
    },\r
\r
    /**\r
     * Lets you specify a css class of elements that will not initiate a drag\r
     * @param {String} cssClass the class of the elements you wish to ignore\r
     */\r
    addInvalidHandleClass: function(cssClass) {\r
        this.invalidHandleClasses.push(cssClass);\r
    },\r
\r
    /**\r
     * Unsets an excluded tag name set by addInvalidHandleType\r
     * @param {String} tagName the type of element to unexclude\r
     */\r
    removeInvalidHandleType: function(tagName) {\r
        var type = tagName.toUpperCase();\r
        // this.invalidHandleTypes[type] = null;\r
        delete this.invalidHandleTypes[type];\r
    },\r
\r
    /**\r
     * Unsets an invalid handle id\r
     * @param {String} id the id of the element to re-enable\r
     */\r
    removeInvalidHandleId: function(id) {\r
        if (typeof id !== "string") {\r
            id = Ext.id(id);\r
        }\r
        delete this.invalidHandleIds[id];\r
    },\r
\r
    /**\r
     * Unsets an invalid css class\r
     * @param {String} cssClass the class of the element(s) you wish to\r
     * re-enable\r
     */\r
    removeInvalidHandleClass: function(cssClass) {\r
        var invalidHandleClasses = this.invalidHandleClasses,\r
            len = invalidHandleClasses.length,\r
            i;\r
\r
        for (i = 0; i < len; ++i) {\r
            if (invalidHandleClasses[i] === cssClass) {\r
                delete invalidHandleClasses[i];\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Checks the tag exclusion list to see if this click should be ignored\r
     * @param {HTMLElement} node the HTMLElement to evaluate\r
     * @return {Boolean} true if this is a valid tag type, false if not\r
     */\r
    isValidHandleChild: function(node) {\r
\r
        var valid = true,\r
            nodeName,\r
            i, len;\r
        // var n = (node.nodeName == "#text") ? node.parentNode : node;\r
        try {\r
            nodeName = node.nodeName.toUpperCase();\r
        } catch(e) {\r
            nodeName = node.nodeName;\r
        }\r
        valid = valid && !this.invalidHandleTypes[nodeName];\r
        valid = valid && !this.invalidHandleIds[node.id];\r
\r
        for (i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {\r
            valid = !Ext.fly(node).hasCls(this.invalidHandleClasses[i]);\r
        }\r
\r
\r
        return valid;\r
\r
    },\r
\r
    /**\r
     * Creates the array of horizontal tick marks if an interval was specified\r
     * in setXConstraint().\r
     * @private\r
     */\r
    setXTicks: function(iStartX, iTickSize) {\r
        this.xTicks = [];\r
        this.xTickSize = iTickSize;\r
\r
        var tickMap = {},\r
            i;\r
\r
        for (i = this.initPageX; i >= this.minX; i = i - iTickSize) {\r
            if (!tickMap[i]) {\r
                this.xTicks[this.xTicks.length] = i;\r
                tickMap[i] = true;\r
            }\r
        }\r
\r
        for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {\r
            if (!tickMap[i]) {\r
                this.xTicks[this.xTicks.length] = i;\r
                tickMap[i] = true;\r
            }\r
        }\r
\r
        Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort);\r
    },\r
\r
    /**\r
     * Creates the array of vertical tick marks if an interval was specified in\r
     * setYConstraint().\r
     * @private\r
     */\r
    setYTicks: function(iStartY, iTickSize) {\r
        this.yTicks = [];\r
        this.yTickSize = iTickSize;\r
\r
        var tickMap = {},\r
            i;\r
\r
        for (i = this.initPageY; i >= this.minY; i = i - iTickSize) {\r
            if (!tickMap[i]) {\r
                this.yTicks[this.yTicks.length] = i;\r
                tickMap[i] = true;\r
            }\r
        }\r
\r
        for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {\r
            if (!tickMap[i]) {\r
                this.yTicks[this.yTicks.length] = i;\r
                tickMap[i] = true;\r
            }\r
        }\r
\r
        Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort);\r
    },\r
\r
    /**\r
     * By default, the element can be dragged any place on the screen.  Use\r
     * this method to limit the horizontal travel of the element.  Pass in\r
     * 0,0 for the parameters if you want to lock the drag to the y axis.\r
     * @param {Number} iLeft the number of pixels the element can move to the left\r
     * @param {Number} iRight the number of pixels the element can move to the\r
     * right\r
     * @param {Number} iTickSize (optional) parameter for specifying that the\r
     * element should move iTickSize pixels at a time.\r
     */\r
    setXConstraint: function(iLeft, iRight, iTickSize) {\r
        this.leftConstraint = iLeft;\r
        this.rightConstraint = iRight;\r
\r
        this.minX = this.initPageX - iLeft;\r
        this.maxX = this.initPageX + iRight;\r
        if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }\r
\r
        this.constrainX = true;\r
    },\r
\r
    /**\r
     * Clears any constraints applied to this instance.  Also clears ticks\r
     * since they can't exist independent of a constraint at this time.\r
     */\r
    clearConstraints: function() {\r
        this.constrainX = false;\r
        this.constrainY = false;\r
        this.clearTicks();\r
    },\r
\r
    /**\r
     * Clears any tick interval defined for this instance\r
     */\r
    clearTicks: function() {\r
        this.xTicks = null;\r
        this.yTicks = null;\r
        this.xTickSize = 0;\r
        this.yTickSize = 0;\r
    },\r
\r
    /**\r
     * By default, the element can be dragged any place on the screen.  Set\r
     * this to limit the vertical travel of the element.  Pass in 0,0 for the\r
     * parameters if you want to lock the drag to the x axis.\r
     * @param {Number} iUp the number of pixels the element can move up\r
     * @param {Number} iDown the number of pixels the element can move down\r
     * @param {Number} iTickSize (optional) parameter for specifying that the\r
     * element should move iTickSize pixels at a time.\r
     */\r
    setYConstraint: function(iUp, iDown, iTickSize) {\r
        this.topConstraint = iUp;\r
        this.bottomConstraint = iDown;\r
\r
        this.minY = this.initPageY - iUp;\r
        this.maxY = this.initPageY + iDown;\r
        if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }\r
\r
        this.constrainY = true;\r
\r
    },\r
\r
    /**\r
     * Must be called if you manually reposition a dd element.\r
     * @param {Boolean} maintainOffset\r
     */\r
    resetConstraints: function() {\r
        // Maintain offsets if necessary\r
        if (this.initPageX || this.initPageX === 0) {\r
            // figure out how much this thing has moved\r
            var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0,\r
                dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;\r
\r
            this.setInitPosition(dx, dy);\r
\r
        // This is the first time we have detected the element's position\r
        } else {\r
            this.setInitPosition();\r
        }\r
\r
        if (this.constrainX) {\r
            this.setXConstraint( this.leftConstraint,\r
                                 this.rightConstraint,\r
                                 this.xTickSize        );\r
        }\r
\r
        if (this.constrainY) {\r
            this.setYConstraint( this.topConstraint,\r
                                 this.bottomConstraint,\r
                                 this.yTickSize         );\r
        }\r
    },\r
\r
    /**\r
     * Normally the drag element is moved pixel by pixel, but we can specify\r
     * that it move a number of pixels at a time.  This method resolves the\r
     * location when we have it set up like this.\r
     * @param {Number} val where we want to place the object\r
     * @param {Number[]} tickArray sorted array of valid points\r
     * @return {Number} the closest tick\r
     * @private\r
     */\r
    getTick: function(val, tickArray) {\r
        if (!tickArray) {\r
            // If tick interval is not defined, it is effectively 1 pixel,\r
            // so we return the value passed to us.\r
            return val;\r
        } else if (tickArray[0] >= val) {\r
            // The value is lower than the first tick, so we return the first\r
            // tick.\r
            return tickArray[0];\r
        } else {\r
            var i, len, next, diff1, diff2;\r
            for (i=0, len=tickArray.length; i<len; ++i) {\r
                next = i + 1;\r
                if (tickArray[next] && tickArray[next] >= val) {\r
                    diff1 = val - tickArray[i];\r
                    diff2 = tickArray[next] - val;\r
                    return (diff2 > diff1) ? tickArray[i] : tickArray[next];\r
                }\r
            }\r
\r
            // The value is larger than the last tick, so we return the last\r
            // tick.\r
            return tickArray[tickArray.length - 1];\r
        }\r
    },\r
\r
    /**\r
     * toString method\r
     * @return {String} string representation of the dd obj\r
     */\r
    toString: function() {\r
        return ("DragDrop " + this.id);\r
    }\r
\r
});\r