Hierarchy
Ext.dd.DragDropExt.dd.DDExt.dd.DDProxyExt.dd.DragSourceExt.dd.DragZone
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(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.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.
+Defaults to true. If true, animates the proxy element back to the position of the handle element used to trigger the drag.
+True to register this container with the Scrollmanager +for auto scrolling during drag operations.
+True to register this container with the Scrollmanager +for auto scrolling during drag operations.
+A named drag drop group to which this object belongs. If a group is specified, then this object will only +interact with other drag drop objects in the same group (defaults to undefined).
+The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+The color to use when visually highlighting the drag source in the afterRepair +method after a failed drop (defaults to 'c3daf9' - light blue). The color must be a 6 digit hex value, without +a preceding '#'.
+The default drag frame div id .dd.DDProxy.dragElId
+The default drag frame div id .dd.DDProxy.dragElId
+The available property is false until the linked dom element is accessible.
+The available property is false until the linked dom element is accessible.
+By default the frame is positioned exactly where the drag element is, so +we use the cursor offset provided by Ext.dd.DD. Another option that works only if +you do not have constraints on the obj is to have the drag frame centered +around the cursor. Set centerFrame to true for this effect.
+Configuration attributes passed into the constructor
+Configuration attributes passed into the constructor
+Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
+Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
+This property contains the data representing the dragged object. This data is set up by the implementation +of the getDragData method. It must contain a ddel property, but can contain +any other data according to the application's needs.
+The group defines a logical collection of DragDrop objects that are +related. Instances only get events when interacting with other +DragDrop object in the same group. This lets us define multiple +groups using a single DragDrop subclass if we want. An object in the format {'group1':true, 'group2':true}
+By default, drags can only be initiated if the mousedown occurs in the +region the linked element is. This is done in part to work around a +bug in some browsers that mis-report the mousedown if the previous +mouseup happened outside of the window. This property is set to true +if outer handles are defined. @default false
+The id of the element associated with this object. This is what we +refer to as the "linked element" because the size and position of +this element is used to determine when the drag and drop objects have +interacted.
+Set to false to enable a DragDrop object to fire drag events while dragging +over its own Element. Defaults to true - DragDrop objects do not by default +fire drag events to themselves.
+An Array of CSS class names for elements to be considered in valid as drag handles.
+An Array of CSS class names for elements to be considered in valid as drag handles.
+An object who's property names identify the IDs of elements to be considered invalid as drag handles. +A non-null property value identifies the ID as invalid. For example, to prevent +dragging from being initiated on element ID "foo", use:
+ +{
+ foo: true
+}An object who's property names identify HTML tags to be considered invalid as drag handles. +A non-null property value identifies the tag as invalid. Defaults to the +following value which prevents drag operations from being initiated by <a> elements:
+ +{
+ A: "A"
+}By default, all instances can be a drop target. This can be disabled by +setting isTarget to false.
+By default, all instances can be a drop target. This can be disabled by +setting isTarget to false.
+Maintain offsets when we resetconstraints. Set to true when you want +the position of the element relative to its parent to stay the same +when the page changes
+When set to true, other DD objects in cooperating DDGroups do not receive +notification events when this DD object is dragged over them. Defaults to false.
+An empty function by default, but provided so that you can perform a custom action once the initial +drag event has begun. The drag cannot be canceled from this function.
+The padding configured for this drag and drop object for calculating +the drop zone intersection with this object. An array containing the 4 padding values: [top, right, bottom, left]
+By default the drag and drop instance will only respond to the primary +button click (left button for a right-handed mouse). Set to true to +allow drag and drop to start with any mouse click that is propogated +by the browser
+By default we resize the drag frame to be the same size as the element +we want to drag (this is to get the frame effect). We can turn it off +if we want a different behavior.
+When set to true, the utility automatically tries to scroll the browser +window when a drag and drop element is dragged near the viewport boundary. +Defaults to true.
+Array of pixel locations the element will snap to if we specified a +horizontal graduation/interval. This array is generated automatically +when you define a tick interval.
+Lets you specify a css class of elements that will not initiate a drag
+Lets you specify a css class of elements that will not initiate a drag
+the class of the elements you wish to ignore
+Lets you to specify an element id for a child of a drag handle +that should not initiate a drag
+Lets you to specify an element id for a child of a drag handle +that should not initiate a drag
+the element id of the element you wish to ignore
+Allows you to specify a tag name that should not start a drag operation +when clicked. This is designed to facilitate embedding links within a +drag handle that do something other than start the drag.
+the type of element to exclude
+Add this instance to a group of related drag/drop objects. All +instances belong to at least one group, and can belong to as many +groups as needed.
+{string} the name of the group
+An empty function by default, but provided so that you can perform a custom action +after a valid drag drop has occurred by providing an implementation.
+The drop target
+The event object
+The id of the dropped element
+An empty function by default, but provided so that you can perform a custom action +when the dragged item enters the drop target by providing an implementation.
+The drop target
+The event object
+The id of the dragged element
+An empty function by default, but provided so that you can perform a custom action +after the dragged item is dragged out of the target without dropping.
+The drop target
+The event object
+The id of the dragged element
+An empty function by default, but provided so that you can perform a custom action +while the dragged item is over the drop target by providing an implementation.
+The drop target
+The event object
+The id of the dragged element
+An empty function by default, but provided so that you can perform a custom action +after an invalid drop has occurred by providing an implementation.
+The event object
+The id of the dropped element
+Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
+Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
+Sets the element to the location of the mousedown or click event, +maintaining the cursor location relative to the location on the element +that was clicked. Override this if you want to place the element in a +location other than where the cursor is.
+the element to move
+the X coordinate of the mousedown or drag event
+the Y coordinate of the mousedown or drag event
+Sets up config options specific to this class. Overrides +Ext.dd.DragDrop, but all versions of this method through the +inheritance chain are called
+Sets the pointer offset to the distance between the linked element's top +left corner and the location the element was clicked
+the X coordinate of the click
+the Y coordinate of the click
+Event that fires prior to the onDrag event. Overrides +Ext.dd.DragDrop.
+Event that fires prior to the onDrag event. Overrides +Ext.dd.DragDrop.
+Event that fires prior to the onMouseDown event. Overrides +Ext.dd.DragDrop.
+Event that fires prior to the onMouseDown event. Overrides +Ext.dd.DragDrop.
+An empty function by default, but provided so that you can perform a custom action before the dragged +item is dropped onto the target and optionally cancel the onDragDrop.
+The drop target
+The event object
+The id of the dragged element
+isValid True if the drag drop event is valid, else false to cancel
+An empty function by default, but provided so that you can perform a custom action +before the dragged item enters the drop target and optionally cancel the onDragEnter.
+The drop target
+The event object
+The id of the dragged element
+isValid True if the drag event is valid, else false to cancel
+An empty function by default, but provided so that you can perform a custom action before the dragged +item is dragged out of the target without dropping, and optionally cancel the onDragOut.
+The drop target
+The event object
+The id of the dragged element
+isValid True if the drag event is valid, else false to cancel
+An empty function by default, but provided so that you can perform a custom action +while the dragged item is over the drop target and optionally cancel the onDragOver.
+The drop target
+The event object
+The id of the dragged element
+isValid True if the drag event is valid, else false to cancel
+An empty function by default, but provided so that you can perform a custom action after an invalid +drop has occurred.
+An empty function by default, but provided so that you can perform a custom action after an invalid +drop has occurred.
+The drop target
+The event object
+The id of the dragged element
+isValid True if the invalid drop should proceed, else false to cancel
+Saves the most recent position so that we can reset the constraints and +tick marks on-demand. We need to know this so that we can calculate the +number of pixels the element is offset from its original position.
+the current x position (optional, this just makes it so we +don't have to look it up again)
+the current y position (optional, this just makes it so we +don't have to look it up again)
+Clears any constraints applied to this instance. Also clears ticks +since they can't exist independent of a constraint at this time.
+Clears any tick interval defined for this instance
+Clears any tick interval defined for this instance
+Initializes the drag drop object's constraints to restrict movement to a certain element.
+ +Usage:
+ + var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
+ { dragElId: "existingProxyDiv" });
+ dd.startDrag = function(){
+ this.constrainTo("parent-id");
+ };
+ Or you can initalize it using the Ext.core.Element object:
+ + Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
+ startDrag : function(){
+ this.constrainTo("parent-id");
+ }
+ });
+ The element to constrain to.
+(optional) Pad provides a way to specify "padding" of the constraints, +and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or +an object containing the sides to pad. For example: {right:10, bottom:10}
+(optional) Constrain the draggable in the content box of the element (inside padding and borders)
+Creates the proxy element if it does not yet exist
+Creates the proxy element if it does not yet exist
+Fired when we are done dragging the object
+Fired when we are done dragging the object
+the mouseup event
+Called when a mousedown occurs in this container. Looks in Ext.dd.Registry +for a valid target to drag based on the mouse down. Override this method +to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned +object has a "ddel" attribute (with an HTML Element) for other functions to work.
+The mouse down event
+The dragData
+Returns a reference to the actual element to drag. By default this is +the same as the html element, but it can be assigned to another +element. An example of this can be found in Ext.dd.DDProxy
+the html element
+Returns a reference to the linked element
+Returns a reference to the linked element
+the html element
+Returns the drag source's underlying Ext.dd.StatusProxy
+Returns the drag source's underlying Ext.dd.StatusProxy
+proxy The StatusProxy
+Called before a repair of an invalid drop to get the XY to animate to. By default returns +the XY of this.dragData.ddel
+Called before a repair of an invalid drop to get the XY to animate to. By default returns +the XY of this.dragData.ddel
+The mouse up event
+The xy location (e.g. [100, 200])
+Hides the drag source's Ext.dd.StatusProxy
+Sets up the DragDrop object. Must be called in the constructor of any +Ext.dd.DragDrop subclass
+Sets up the DragDrop object. Must be called in the constructor of any +Ext.dd.DragDrop subclass
+the id of the linked element
+the group of related items
+configuration attributes
+Initialization for the drag frame element. Must be called in the +constructor of all subclasses
+Initialization for the drag frame element. Must be called in the +constructor of all subclasses
+Initializes Targeting functionality only... the object does not +get a mousedown handler.
+Initializes Targeting functionality only... the object does not +get a mousedown handler.
+the id of the linked element
+the group of related items
+configuration attributes
+Returns true if this instance is locked, or the drag drop mgr is locked +(meaning that all drag/drop is disabled on the page.)
+true if this obj or all drag/drop is locked, else +false
+Checks the tag exclusion list to see if this click should be ignored
+Checks the tag exclusion list to see if this click should be ignored
+the HTMLElement to evaluate
+true if this is a valid tag type, false if not
+Override the onAvailable method to do what is needed after the initial +position was determined.
+Override the onAvailable method to do what is needed after the initial +position was determined.
+An empty function by default, but provided so that you can perform a custom action before the initial +drag event begins and optionally cancel it.
+An object containing arbitrary data to be shared with drop targets
+The event object
+isValid True if the drag event is valid, else false to cancel
+Abstract method called during the onMouseMove event while dragging an +object.
+Abstract method called during the onMouseMove event while dragging an +object.
+the mousemove event
+Abstract method called when this item is dropped on another DragDrop +obj
+Abstract method called when this item is dropped on another DragDrop +obj
+the mouseup event
+In POINT mode, the element +id this was dropped on. In INTERSECT mode, an array of dd items this +was dropped on.
+Abstract method called when this element fist begins hovering over +another DragDrop obj
+Abstract method called when this element fist begins hovering over +another DragDrop obj
+the mousemove event
+In POINT mode, the element +id this is hovering over. In INTERSECT mode, an array of one or more +dragdrop items being hovered over.
+Abstract method called when we are no longer hovering over an element
+Abstract method called when we are no longer hovering over an element
+the mousemove event
+In POINT mode, the element +id this was hovering over. In INTERSECT mode, an array of dd items +that the mouse is no longer over.
+Abstract method called when this element is hovering over another +DragDrop obj
+Abstract method called when this element is hovering over another +DragDrop obj
+the mousemove event
+In POINT mode, the element +id this is hovering over. In INTERSECT mode, an array of dd items +being hovered over.
+Called once drag threshold has been reached to initialize the proxy element. By default, it clones the +this.dragData.ddel
+The x position of the click on the dragged object
+The y position of the click on the dragged object
+true to continue the drag, false to cancel
+Abstract method called when this item is dropped on an area with no +drop target
+Abstract method called when this item is dropped on an area with no +drop target
+the mouseup event
+Event handler that fires when a drag/drop obj gets a mousedown
+Event handler that fires when a drag/drop obj gets a mousedown
+the mousedown event
+Event handler that fires when a drag/drop obj gets a mouseup
+Event handler that fires when a drag/drop obj gets a mouseup
+the mouseup event
+Remove's this instance from the supplied interaction group
+Remove's this instance from the supplied interaction group
+The group to drop
+Unsets an invalid css class
+Unsets an invalid css class
+the class of the element(s) you wish to +re-enable
+Unsets an invalid handle id
+Unsets an invalid handle id
+the id of the element to re-enable
+Unsets an excluded tag name set by addInvalidHandleType
+Unsets an excluded tag name set by addInvalidHandleType
+the type of element to unexclude
+resetConstraints must be called if you manually reposition a dd element.
+resetConstraints must be called if you manually reposition a dd element.
+Sets the pointer offset. You can call this directly to force the +offset to be in a particular location (e.g., pass in 0,0 to set it +to the center of the object)
+the distance from the left
+the distance from the top
+Allows you to specify that an element other than the linked element +will be moved with the cursor during a drag
+Allows you to specify that an element other than the linked element +will be moved with the cursor during a drag
+{string} the id of the element that will be used to initiate the drag
+Sets the drag element to the location of the mousedown or click event, +maintaining the cursor location relative to the location on the element +that was clicked. Override this if you want to place the element in a +location other than where the cursor is.
+the X coordinate of the mousedown or drag event
+the Y coordinate of the mousedown or drag event
+Allows you to specify a child of the linked element that should be +used to initiate the drag operation. An example of this would be if +you have a content div with text and links. Clicking anywhere in the +content area would normally start the drag operation. Use this method +to specify that an element inside of the content div is the element +that starts the drag operation.
+{string} the id of the element that will be used to +initiate the drag.
+Stores the initial placement of the linked element.
+Stores the initial placement of the linked element.
+the X offset, default 0
+the Y offset, default 0
+Allows you to set an element outside of the linked element as a drag +handle
+Allows you to set an element outside of the linked element as a drag +handle
+the id of the element that will be used to initiate the drag
+Configures the padding for the target zone in px. Effectively expands +(or reduces) the virtual object size for targeting calculations. +Supports css-style shorthand; if only one parameter is passed, all sides +will have that padding, and if only two are passed, the top and bottom +will have the first param, the left and right the second.
+Top pad
+Right pad
+Bot pad
+Left pad
+By default, the element can be dragged any place on the screen. Use +this method to limit the horizontal travel of the element. Pass in +0,0 for the parameters if you want to lock the drag to the y axis.
+the number of pixels the element can move to the left
+the number of pixels the element can move to the +right
+optional parameter for specifying that the +element +should move iTickSize pixels at a time.
+By default, the element can be dragged any place on the screen. Set +this to limit the vertical travel of the element. Pass in 0,0 for the +parameters if you want to lock the drag to the x axis.
+the number of pixels the element can move up
+the number of pixels the element can move down
+optional parameter for specifying that the +element should move iTickSize pixels at a time.
+Abstract method called after a drag/drop object is clicked +and the drag or mousedown time thresholds have beeen met.
+Abstract method called after a drag/drop object is clicked +and the drag or mousedown time thresholds have beeen met.
+click location
+click location
+