This class provides a container DD instance that allows dragging of multiple child source nodes.
+ *This class does not move the drag target nodes, but a proxy element which may contain + * any DOM structure you wish. The DOM element to show in the proxy is provided by either a + * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
+ *If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some + * application object (For example nodes in a {@link Ext.view.View DataView}) then use of this class + * is the most efficient way to "activate" those nodes.
+ *By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. + * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure + * the DragZone with an implementation of the {@link #getDragData} method which interrogates the passed + * mouse event to see if it has taken place within an element, or class of elements. This is easily done + * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a + * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following + * technique. Knowledge of the use of the DataView is required:
+myDataView.on('render', function(v) {
+ myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
+
+// On receipt of a mousedown event, see if it is within a DataView node.
+// Return a drag data object if so.
+ getDragData: function(e) {
+
+// Use the DataView's own itemSelector (a mandatory property) to
+// test if the mousedown is within one of the DataView's nodes.
+ var sourceEl = e.getTarget(v.itemSelector, 10);
+
+// If the mousedown is within a DataView node, clone the node to produce
+// a ddel element for use by the drag proxy. Also add application data
+// to the returned data object.
+ if (sourceEl) {
+ d = sourceEl.cloneNode(true);
+ d.id = Ext.id();
+ return {
+ ddel: d,
+ sourceEl: sourceEl,
+ repairXY: Ext.fly(sourceEl).getXY(),
+ sourceStore: v.store,
+ draggedRecord: v.{@link Ext.view.View#getRecord getRecord}(sourceEl)
+ }
+ }
+ },
+
+// Provide coordinates for the proxy to slide back to on failed drag.
+// This is the original XY coordinates of the draggable element captured
+// in the getDragData method.
+ getRepairXY: function() {
+ return this.dragData.repairXY;
+ }
+ });
+});This class provides a container DD instance that allows dragging of multiple child source nodes.
- *This class does not move the drag target nodes, but a proxy element which may contain - * any DOM structure you wish. The DOM element to show in the proxy is provided by either a - * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
- *If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some - * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class - * is the most efficient way to "activate" those nodes.
- *By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. - * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure - * the DragZone with an implementation of the {@link #getDragData} method which interrogates the passed - * mouse event to see if it has taken place within an element, or class of elements. This is easily done - * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a - * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following - * technique. Knowledge of the use of the DataView is required:
-myDataView.on('render', function() {
- myDataView.dragZone = new Ext.dd.DragZone(myDataView.getEl(), {
-
-// On receipt of a mousedown event, see if it is within a DataView node.
-// Return a drag data object if so.
- getDragData: function(e) {
-
-// Use the DataView's own itemSelector (a mandatory property) to
-// test if the mousedown is within one of the DataView's nodes.
- var sourceEl = e.getTarget(myDataView.itemSelector, 10);
-
-// If the mousedown is within a DataView node, clone the node to produce
-// a ddel element for use by the drag proxy. Also add application data
-// to the returned data object.
- if (sourceEl) {
- d = sourceEl.cloneNode(true);
- d.id = Ext.id();
- return {
- ddel: d,
- sourceEl: sourceEl,
- repairXY: Ext.fly(sourceEl).getXY(),
- sourceStore: myDataView.store,
- draggedRecord: v.getRecord(sourceEl)
- }
- }
- },
-
-// Provide coordinates for the proxy to slide back to on failed drag.
-// This is the original XY coordinates of the draggable element captured
-// in the getDragData method.
- getRepairXY: function() {
- return this.dragData.repairXY;
- }
- });
-});