X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.dd.DragZone.html diff --git a/docs/output/Ext.dd.DragZone.html b/docs/output/Ext.dd.DragZone.html index eb9ed13b..89cb7ee0 100644 --- a/docs/output/Ext.dd.DragZone.html +++ b/docs/output/Ext.dd.DragZone.html @@ -1,69 +1,64 @@ -
Properties Methods Events Config Options Direct Link 
DragDrop
  DD
    DDProxy
      DragSource
        DragZone

Class Ext.dd.DragZone

Package:Ext.dd
Defined In:DragZone.js
Class:DragZone
Subclasses:GridDragZone, TreeDragZone
Extends:DragSource

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 getDragData, or by registered draggables registered with 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 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 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 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 getTarget method to identify a node based on a -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;
-        }
-    });
-});
-See the DropZone documentation for details about building a DropZone which -cooperates with this DragZone.

Config Options

Config OptionsDefined By
 containerScroll : Boolean
True to register this container with the Scrollmanager -for auto scrolling during drag operations.
DragZone
 dropAllowed : String
The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
DragSource
 dropNotAllowed : String
The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
DragSource

Public Properties

PropertyDefined By
 Ext.dd.DDProxy.dragElId : String
The default drag frame div id
DDProxy
 available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop