add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / dd / dnd_with_dom.js

Ext.onReady(function() {\r
    // Create an object that we'll use to implement and override drag behaviors a little later\r
    var overrides = {\r
        // Called the instance the element is dragged.\r
        b4StartDrag : function() {\r
            // Cache the drag element\r
            if (!this.el) {\r
                this.el = Ext.get(this.getEl());\r
            }\r
            \r
            //Cache the original XY Coordinates of the element, we'll use this later.\r
            this.originalXY = this.el.getXY();\r
        },\r
        // Called when element is dropped not anything other than a dropzone with the same ddgroup\r
        onInvalidDrop : function() {\r
            // Set a flag to invoke the animated repair\r
            this.invalidDrop = true;\r
        },\r
        // Called when the drag operation completes\r
        endDrag : function() {\r
            // Invoke the animation if the invalidDrop flag is set to true\r
            if (this.invalidDrop === true) {\r
                // Remove the drop invitation\r
                this.el.removeCls('dropOK');\r
                \r
                // Create the animation configuration object\r
                var animCfgObj = {\r
                    easing   : 'elasticOut',\r
                    duration : 1,\r
                    scope    : this,\r
                    callback : function() {\r
                        // Remove the position attribute\r
                        this.el.dom.style.position = '';\r
                    }\r
                };\r
                \r
                // Apply the repair animation\r
                this.el.setXY([this.originalXY[0], this.originalXY[1]], animCfgObj);\r
                delete this.invalidDrop;\r
            }\r
        },\r
        // Called upon successful drop of an element on a DDTarget with the same\r
        onDragDrop : function(evtObj, targetElId) {\r
            // Wrap the drop target element with Ext.Element\r
            var dropEl = Ext.get(targetElId);\r
            \r
            // Perform the node move only if the drag element's\r
            // parent is not the same as the drop target\r
            if (this.el.dom.parentNode.id != targetElId) {\r
                \r
                // Move the element\r
                dropEl.appendChild(this.el);\r
                \r
                // Remove the drag invitation\r
                this.onDragOut(evtObj, targetElId);\r
                \r
                // Clear the styles\r
                this.el.dom.style.position ='';\r
                this.el.dom.style.top = '';\r
                this.el.dom.style.left = '';\r
            }\r
            else {\r
                // This was an invalid drop, initiate a repair\r
                this.onInvalidDrop();\r
            }\r
        },\r
        // Only called when the drag element is dragged over the a drop target with the same ddgroup\r
        onDragEnter : function(evtObj, targetElId) {\r
            // Colorize the drag target if the drag node's parent is not the same as the drop target\r
            if (targetElId != this.el.dom.parentNode.id) {\r
                this.el.addCls('dropOK');\r
            }\r
            else {\r
                // Remove the invitation\r
                this.onDragOut();\r
            }\r
        },\r
        // Only called when element is dragged out of a dropzone with the same ddgroup\r
        onDragOut : function(evtObj, targetElId) {\r
            this.el.removeCls('dropOK');\r
        }\r
    };\r
\r
    // Configure the cars to be draggable\r
    var carElements = Ext.get('cars').select('div');\r
    Ext.each(carElements.elements, function(el) {\r
        var dd = Ext.create('Ext.dd.DD', el, 'carsDDGroup', {\r
            isTarget  : false\r
        });\r
        //Apply the overrides object to the newly created instance of DD\r
        Ext.apply(dd, overrides);\r
    });\r
\r
    var truckElements = Ext.get('trucks').select('div');\r
    Ext.each(truckElements.elements, function(el) {\r
        var dd = Ext.create('Ext.dd.DD', el, 'trucksDDGroup', {\r
            isTarget  : false\r
        });\r
        Ext.apply(dd, overrides);\r
    });\r
    \r
    // Instantiate instances of Ext.dd.DDTarget for the cars and trucks container\r
    var carsDDTarget = Ext.create('Ext.dd.DDTarget', 'cars','carsDDGroup');\r
    var trucksDDTarget = Ext.create('Ext.dd.DDTarget', 'trucks', 'trucksDDGroup');\r
\r
    // Instantiate instnaces of DDTarget for the rented and repair drop target elements\r
    var rentedDDTarget = Ext.create('Ext.dd.DDTarget', 'rented', 'carsDDGroup');\r
    var repairDDTarget = Ext.create('Ext.dd.DDTarget', 'repair', 'carsDDGroup');\r
\r
    // Ensure that the rented and repair DDTargets will participate in the trucksDDGroup\r
    rentedDDTarget.addToGroup('trucksDDGroup');\r
    repairDDTarget.addToGroup('trucksDDGroup');\r
\r
});\r