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
-