source/dd/DragZone.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.dd.DragZone\r
  11  * @extends Ext.dd.DragSource\r
  12  * This class provides a container DD instance that proxies for multiple child node sources.<br />\r
  13  * By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.\r
  14  * @constructor\r
  15  * @param {Mixed} el The container element\r
  16  * @param {Object} config\r
  17  */\r
  18 Ext.dd.DragZone = function(el, config){\r
  19     Ext.dd.DragZone.superclass.constructor.call(this, el, config);\r
  20     if(this.containerScroll){\r
  21         Ext.dd.ScrollManager.register(this.el);\r
  22     }\r
  23 };\r
  24 \r
  25 Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {\r
  26     /**\r
  27      * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager\r
  28      * for auto scrolling during drag operations.\r
  29      */\r
  30     /**\r
  31      * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair\r
  32      * method after a failed drop (defaults to "c3daf9" - light blue)\r
  33      */\r
  34 \r
  35     /**\r
  36      * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}\r
  37      * for a valid target to drag based on the mouse down. Override this method\r
  38      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned\r
  39      * object has a "ddel" attribute (with an HTML Element) for other functions to work.\r
  40      * @param {EventObject} e The mouse down event\r
  41      * @return {Object} The dragData\r
  42      */\r
  43     getDragData : function(e){\r
  44         return Ext.dd.Registry.getHandleFromEvent(e);\r
  45     },\r
  46     \r
  47     /**\r
  48      * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the\r
  49      * this.dragData.ddel\r
  50      * @param {Number} x The x position of the click on the dragged object\r
  51      * @param {Number} y The y position of the click on the dragged object\r
  52      * @return {Boolean} true to continue the drag, false to cancel\r
  53      */\r
  54     onInitDrag : function(x, y){\r
  55         this.proxy.update(this.dragData.ddel.cloneNode(true));\r
  56         this.onStartDrag(x, y);\r
  57         return true;\r
  58     },\r
  59     \r
  60     /**\r
  61      * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel \r
  62      */\r
  63     afterRepair : function(){\r
  64         if(Ext.enableFx){\r
  65             Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");\r
  66         }\r
  67         this.dragging = false;\r
  68     },\r
  69 \r
  70     /**\r
  71      * Called before a repair of an invalid drop to get the XY to animate to. By default returns\r
  72      * the XY of this.dragData.ddel\r
  73      * @param {EventObject} e The mouse up event\r
  74      * @return {Array} The xy location (e.g. [100, 200])\r
  75      */\r
  76     getRepairXY : function(e){\r
  77         return Ext.Element.fly(this.dragData.ddel).getXY();  \r
  78     }\r
  79 });