]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * This class provides a container DD instance that allows dragging of multiple child source nodes.\r | |
3 | *\r | |
4 | * This class does not move the drag target nodes, but a proxy element which may contain any DOM structure you wish. The\r | |
5 | * DOM element to show in the proxy is provided by either a provided implementation of {@link #getDragData}, or by\r | |
6 | * registered draggables registered with {@link Ext.dd.Registry}\r | |
7 | *\r | |
8 | * If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some application\r | |
9 | * object (For example nodes in a {@link Ext.view.View DataView}) then use of this class is the most efficient way to\r | |
10 | * "activate" those nodes.\r | |
11 | *\r | |
12 | * By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. However a\r | |
13 | * simpler way to allow a DragZone to manage any number of draggable elements is to configure the DragZone with an\r | |
14 | * implementation of the {@link #getDragData} method which interrogates the passed mouse event to see if it has taken\r | |
15 | * place within an element, or class of elements. This is easily done by using the event's {@link\r | |
16 | * Ext.event.Event#getTarget getTarget} method to identify a node based on a CSS selector. For example,\r | |
17 | * to make the nodes of a DataView draggable, use the following technique. Knowledge of the use of the DataView is\r | |
18 | * required:\r | |
19 | *\r | |
20 | * myDataView.on('render', function(v) {\r | |
21 | * myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {\r | |
22 | *\r | |
23 | * // On receipt of a mousedown event, see if it is within a DataView node.\r | |
24 | * // Return a drag data object if so.\r | |
25 | * getDragData: function(e) {\r | |
26 | *\r | |
27 | * // Use the DataView's own itemSelector (a mandatory property) to\r | |
28 | * // test if the mousedown is within one of the DataView's nodes.\r | |
29 | * var sourceEl = e.getTarget(v.itemSelector, 10);\r | |
30 | *\r | |
31 | * // If the mousedown is within a DataView node, clone the node to produce\r | |
32 | * // a ddel element for use by the drag proxy. Also add application data\r | |
33 | * // to the returned data object.\r | |
34 | * if (sourceEl) {\r | |
35 | * d = sourceEl.cloneNode(true);\r | |
36 | * d.id = Ext.id();\r | |
37 | * return {\r | |
38 | * ddel: d,\r | |
39 | * sourceEl: sourceEl,\r | |
40 | * repairXY: Ext.fly(sourceEl).getXY(),\r | |
41 | * sourceStore: v.store,\r | |
42 | * draggedRecord: v.{@link Ext.view.View#getRecord getRecord}(sourceEl)\r | |
43 | * }\r | |
44 | * }\r | |
45 | * },\r | |
46 | *\r | |
47 | * // Provide coordinates for the proxy to slide back to on failed drag.\r | |
48 | * // This is the original XY coordinates of the draggable element captured\r | |
49 | * // in the getDragData method.\r | |
50 | * getRepairXY: function() {\r | |
51 | * return this.dragData.repairXY;\r | |
52 | * }\r | |
53 | * });\r | |
54 | * });\r | |
55 | *\r | |
56 | * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which cooperates with\r | |
57 | * this DragZone.\r | |
58 | */\r | |
59 | Ext.define('Ext.dd.DragZone', {\r | |
60 | extend: 'Ext.dd.DragSource',\r | |
61 | \r | |
62 | /**\r | |
63 | * Creates new DragZone.\r | |
64 | * @param {String/HTMLElement/Ext.dom.Element} el The container element or ID of it.\r | |
65 | * @param {Object} config\r | |
66 | */\r | |
67 | constructor : function(el, config){\r | |
68 | var me = this,\r | |
69 | scroll = me.containerScroll;\r | |
70 | \r | |
71 | me.callParent([el, config]);\r | |
72 | if (scroll) {\r | |
73 | el = me.scrollEl || el;\r | |
74 | el = Ext.get(el);\r | |
75 | if (Ext.isObject(scroll)) {\r | |
76 | el.ddScrollConfig = scroll;\r | |
77 | }\r | |
78 | Ext.dd.ScrollManager.register(el);\r | |
79 | }\r | |
80 | },\r | |
81 | \r | |
82 | /**\r | |
83 | * @cfg {Object/Boolean} containerScroll\r | |
84 | * True to register this container with the Scrollmanager for auto scrolling during drag operations.\r | |
85 | * A {@link Ext.dd.ScrollManager} configuration may also be passed.\r | |
86 | */\r | |
87 | \r | |
88 | /**\r | |
89 | * @cfg {String/HTMLElement/Ext.dom.Element} scrollEl\r | |
90 | * An element to register with the ScrollManager if {@link #containerScroll}\r | |
91 | * is set. Defaults to the drag element.\r | |
92 | */\r | |
93 | \r | |
94 | /**\r | |
95 | * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry} for a valid target to drag\r | |
96 | * based on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class\r | |
97 | * name). Make sure your returned object has a "ddel" attribute (with an HTML Element) for other functions to work.\r | |
98 | * @param {Event} e The mouse down event\r | |
99 | * @return {Object} The dragData\r | |
100 | */\r | |
101 | getDragData : function(e){\r | |
102 | return Ext.dd.Registry.getHandleFromEvent(e);\r | |
103 | },\r | |
104 | \r | |
105 | /**\r | |
106 | * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the\r | |
107 | * this.dragData.ddel\r | |
108 | * @param {Number} x The x position of the click on the dragged object\r | |
109 | * @param {Number} y The y position of the click on the dragged object\r | |
110 | * @return {Boolean} true to continue the drag, false to cancel\r | |
111 | * @template\r | |
112 | */\r | |
113 | onInitDrag : function(x, y){\r | |
114 | this.proxy.update(this.dragData.ddel.cloneNode(true));\r | |
115 | this.onStartDrag(x, y);\r | |
116 | return true;\r | |
117 | },\r | |
118 | \r | |
119 | /**\r | |
120 | * Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of\r | |
121 | * this.dragData.ddel\r | |
122 | * @param {Event} e The mouse up event\r | |
123 | * @return {Number[]} The xy location (e.g. `[100, 200]`)\r | |
124 | * @template\r | |
125 | */\r | |
126 | getRepairXY : function(e){\r | |
127 | return Ext.fly(this.dragData.ddel).getXY();\r | |
128 | },\r | |
129 | \r | |
130 | destroy : function(){\r | |
131 | this.callParent();\r | |
132 | if (this.containerScroll) {\r | |
133 | Ext.dd.ScrollManager.unregister(this.scrollEl || this.el);\r | |
134 | }\r | |
135 | }\r | |
136 | });\r |