Defines the interface and base operation of items that that can be
dragged or can be drop targets. It was designed to be extended, overriding
the event handlers for startDrag, onDrag, onDragOver and onDragOut.
Up to three html elements can be associated with a DragDrop instance:
- linked element: the element that is passed into the constructor.
This is the element which defines the boundaries for interaction with
other DragDrop objects.
- handle element(s): The drag operation only occurs if the element that
was clicked matches a handle element. By default this is the linked
element, but there are times that you will want only a portion of the
linked element to initiate the drag operation, and the setHandleElId()
method provides a way to define this.
- drag element: this represents the element that would be moved along
with the cursor during a drag operation. By default, this is the linked
element itself as in Ext.dd.DD. setDragElId() lets you define
a separate element that would be moved, as in Ext.dd.DDProxy.
This class should not be instantiated until the onload event to ensure that
the associated elements are available.
The following would define a DragDrop obj that would interact with any
other DragDrop obj in the "group1" group:
dd = new Ext.dd.DragDrop("div1", "group1");
Since none of the event handlers have been implemented, nothing would
actually happen if you were to run the code above. Normally you would
override this class or one of the default implementations, but you can
also override the methods you want on an instance of the class...
dd.onDragDrop = function(e, id) {
alert("dd was dropped on " + id);
}
|
available : boolean |
DragDrop |
The availabe property is false until the linked dom element is accessible. |
|
config : object |
DragDrop |
Configuration attributes passed into the constructor |
|
groups : string: |
DragDrop |
The group defines a logical collection of DragDrop objects that are
related. Instances only get events when interact... |
|
hasOuterHandles : boolean |
DragDrop |
By default, drags can only be initiated if the mousedown occurs in the
region the linked element is. This is done in... |
|
id : String |
DragDrop |
The id of the element associated with this object. This is what we
refer to as the "linked element" because the size... |
|
invalidHandleClasses : string[] |
DragDrop |
An indexted array of css class names for elements that will be ignored
if clicked. |
|
invalidHandleIds : string: |
DragDrop |
An associative array of ids for elements that will be ignored if clicked |
|
invalidHandleTypes : string: |
DragDrop |
An associative array of HTML tags that will be ignored if clicked. |
|
maintainOffset : boolean |
DragDrop |
Maintain offsets when we resetconstraints. Set to true when you want
the position of the element relative to its par... |
|
primaryButtonOnly : boolean |
DragDrop |
By default the drag and drop instance will only respond to the primary
button click (left button for a right-handed m... |
|
xTicks : int[] |
DragDrop |
Array of pixel locations the element will snap to if we specified a
horizontal graduation/interval. This array is ge... |
|
yTicks : int[] |
DragDrop |
Array of pixel locations the element will snap to if we specified a
vertical graduation/interval. This array is gene... |
|
DragDrop( String id , String sGroup , object config ) |
DragDrop |
|
|
addInvalidHandleClass( string cssClass ) : void |
DragDrop |
Lets you specify a css class of elements that will not initiate a drag |
|
addInvalidHandleId( string id ) : void |
DragDrop |
Lets you to specify an element id for a child of a drag handle
that should not initiate a drag |
|
addInvalidHandleType( string tagName ) : void |
DragDrop |
Allows you to specify a tag name that should not start a drag operation
when clicked. This is designed to facilitate... |
|
addToGroup( sGroup {string} ) : void |
DragDrop |
Add this instance to a group of related drag/drop objects. All
instances belong to at least one group, and can belon... |
|
applyConfig() : void |
DragDrop |
Applies the configuration parameters that were passed into the constructor.
This is supposed to happen at each level ... |
|
clearConstraints() : void |
DragDrop |
Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constrain... |
|
clearTicks() : void |
DragDrop |
Clears any tick interval defined for this instance |
|
endDrag( Event e ) : void |
DragDrop |
Fired when we are done dragging the object |
|
getDragEl() : HTMLElement |
DragDrop |
Returns a reference to the actual element to drag. By default this is
the same as the html element, but it can be as... |
|
getEl() : HTMLElement |
DragDrop |
Returns a reference to the linked element |
|
init( id the , String sGroup , object config ) : void |
DragDrop |
Sets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclass |
|
initTarget( id the , String sGroup , object config ) : void |
DragDrop |
Initializes Targeting functionality only... the object does not
get a mousedown handler. |
|
isLocked() : boolean |
DragDrop |
Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on th... |
|
isTarget() : void |
DragDrop |
By default, all insances can be a drop target. This can be disabled by
setting isTarget to false. |
|
isValidHandleChild( HTMLElement node ) : boolean |
DragDrop |
Checks the tag exclusion list to see if this click should be ignored |
|
lock() : void |
DragDrop |
Lock this instance |
|
onAvailable() : void |
DragDrop |
Override the onAvailable method to do what is needed after the initial
position was determined. |
|
onDrag( Event e ) : void |
DragDrop |
Abstract method called during the onMouseMove event while dragging an
object. |
|
onDragDrop( Event e , String|DragDrop[] id ) : void |
DragDrop |
Abstract method called when this item is dropped on another DragDrop
obj |
|
onDragEnter( Event e , String|DragDrop[] id ) : void |
DragDrop |
Abstract method called when this element fist begins hovering over
another DragDrop obj |
|
onDragOut( Event e , String|DragDrop[] id ) : void |
DragDrop |
Abstract method called when we are no longer hovering over an element |
|
onDragOver( Event e , String|DragDrop[] id ) : void |
DragDrop |
Abstract method called when this element is hovering over another
DragDrop obj |
|
onInvalidDrop( Event e ) : void |
DragDrop |
Abstract method called when this item is dropped on an area with no
drop target |
|
onMouseDown( Event e ) : void |
DragDrop |
Event handler that fires when a drag/drop obj gets a mousedown |
|
onMouseUp( Event e ) : void |
DragDrop |
Event handler that fires when a drag/drop obj gets a mouseup |
|
padding() : void |
DragDrop |
The padding configured for this drag and drop object for calculating
the drop zone intersection with this object. |
|
removeFromGroup( string sGroup ) : void |
DragDrop |
Remove's this instance from the supplied interaction group |
|
removeInvalidHandleClass( string cssClass ) : void |
DragDrop |
Unsets an invalid css class |
|
removeInvalidHandleId( string id ) : void |
DragDrop |
Unsets an invalid handle id |
|
removeInvalidHandleType( string tagName ) : void |
DragDrop |
Unsets an excluded tag name set by addInvalidHandleType |
|
resetConstraints( boolean maintainOffset ) : void |
DragDrop |
resetConstraints must be called if you manually reposition a dd element. |
|
setDragElId( id {string} ) : void |
DragDrop |
Allows you to specify that an element other than the linked element
will be moved with the cursor during a drag |
|
setHandleElId( id {string} ) : void |
DragDrop |
Allows you to specify a child of the linked element that should be
used to initiate the drag operation. An example o... |
|
setInitialPosition( int diffX , int diffY ) : void |
DragDrop |
Stores the initial placement of the linked element. |
|
setOuterHandleElId( id the ) : void |
DragDrop |
Allows you to set an element outside of the linked element as a drag
handle |
|
setPadding( int iTop , int iRight , int iBot , int iLeft ) : void |
DragDrop |
Configures the padding for the target zone in px. Effectively expands
(or reduces) the virtual object size for targe... |
|
setXConstraint( int iLeft , int iRight , int iTickSize ) : void |
DragDrop |
By default, the element can be dragged any place on the screen. Use
this method to limit the horizontal travel of th... |
|
setYConstraint( int iUp , int iDown , int iTickSize ) : void |
DragDrop |
By default, the element can be dragged any place on the screen. Set
this to limit the vertical travel of the element... |
|
startDrag( int X , int Y ) : void |
DragDrop |
Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met. |
|
toString() : string |
DragDrop |
toString method |
|
unlock() : void |
DragDrop |
Unlock this instace |
|
unreg() : void |
DragDrop |
Remove all drag and drop hooks for this element |
This class has no public events.
available
public boolean available
The availabe property is false until the linked dom element is accessible.
This property is defined by DragDrop.
config
public object config
Configuration attributes passed into the constructor
This property is defined by DragDrop.
groups
public string: groups
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.
This property is defined by DragDrop.
hasOuterHandles
public boolean hasOuterHandles
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.
This property is defined by DragDrop.
id
public String id
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.
This property is defined by DragDrop.
invalidHandleClasses
public string[] invalidHandleClasses
An indexted array of css class names for elements that will be ignored
if clicked.
This property is defined by DragDrop.
invalidHandleIds
public string: invalidHandleIds
An associative array of ids for elements that will be ignored if clicked
This property is defined by DragDrop.
invalidHandleTypes
public string: invalidHandleTypes
An associative array of HTML tags that will be ignored if clicked.
This property is defined by DragDrop.
maintainOffset
public boolean maintainOffset
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
This property is defined by DragDrop.
primaryButtonOnly
public boolean primaryButtonOnly
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
This property is defined by DragDrop.
xTicks
public int[] xTicks
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.
This property is defined by DragDrop.
yTicks
public int[] yTicks
Array of pixel locations the element will snap to if we specified a
vertical graduation/interval. This array is generated automatically
when you define a tick interval.
This property is defined by DragDrop.
addInvalidHandleClass
public function addInvalidHandleClass( string cssClass
)
Lets you specify a css class of elements that will not initiate a drag
This method is defined by DragDrop.
addInvalidHandleId
public function addInvalidHandleId( string id
)
Lets you to specify an element id for a child of a drag handle
that should not initiate a drag
This method is defined by DragDrop.
addInvalidHandleType
public function addInvalidHandleType( string tagName
)
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.
This method is defined by DragDrop.
addToGroup
public function addToGroup( sGroup {string}
)
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.
Parameters:
{string}
: sGroupthe name of the group
Returns:
This method is defined by DragDrop.
applyConfig
public function applyConfig()
Applies the configuration parameters that were passed into the constructor.
This is supposed to happen at each level through the inheritance chain. So
a DDProxy implentation will execute apply config on DDProxy, DD, and
DragDrop in order to get all of the parameters that are available in
each object.
This method is defined by DragDrop.
clearConstraints
public function clearConstraints()
Clears any constraints applied to this instance. Also clears ticks
since they can't exist independent of a constraint at this time.
This method is defined by DragDrop.
clearTicks
public function clearTicks()
Clears any tick interval defined for this instance
This method is defined by DragDrop.
endDrag
public function endDrag( Event e
)
Fired when we are done dragging the object
Parameters:
e
: Eventthe mouseup event
Returns:
This method is defined by DragDrop.
getDragEl
public function getDragEl()
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
Parameters:
Returns:
HTMLElement
the html element
This method is defined by DragDrop.
getEl
public function getEl()
Returns a reference to the linked element
Parameters:
Returns:
HTMLElement
the html element
This method is defined by DragDrop.
init
public function init( id the
, String sGroup
, object config
)
Sets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclass
This method is defined by DragDrop.
initTarget
public function initTarget( id the
, String sGroup
, object config
)
Initializes Targeting functionality only... the object does not
get a mousedown handler.
This method is defined by DragDrop.
isLocked
public function isLocked()
Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)
This method is defined by DragDrop.
isTarget
public function isTarget()
By default, all insances can be a drop target. This can be disabled by
setting isTarget to false.
This method is defined by DragDrop.
isValidHandleChild
public function isValidHandleChild( HTMLElement node
)
Checks the tag exclusion list to see if this click should be ignored
This method is defined by DragDrop.
lock
public function lock()
This method is defined by DragDrop.
onAvailable
public function onAvailable()
Override the onAvailable method to do what is needed after the initial
position was determined.
This method is defined by DragDrop.
onDrag
public function onDrag( Event e
)
Abstract method called during the onMouseMove event while dragging an
object.
Parameters:
e
: Eventthe mousemove event
Returns:
This method is defined by DragDrop.
onDragDrop
public function onDragDrop( Event e
, String|DragDrop[] id
)
Abstract method called when this item is dropped on another DragDrop
obj
This method is defined by DragDrop.
onDragEnter
public function onDragEnter( Event e
, String|DragDrop[] id
)
Abstract method called when this element fist begins hovering over
another DragDrop obj
This method is defined by DragDrop.
onDragOut
public function onDragOut( Event e
, String|DragDrop[] id
)
Abstract method called when we are no longer hovering over an element
This method is defined by DragDrop.
onDragOver
public function onDragOver( Event e
, String|DragDrop[] id
)
Abstract method called when this element is hovering over another
DragDrop obj
This method is defined by DragDrop.
onInvalidDrop
public function onInvalidDrop( Event e
)
Abstract method called when this item is dropped on an area with no
drop target
Parameters:
e
: Eventthe mouseup event
Returns:
This method is defined by DragDrop.
onMouseDown
public function onMouseDown( Event e
)
Event handler that fires when a drag/drop obj gets a mousedown
Parameters:
e
: Eventthe mousedown event
Returns:
This method is defined by DragDrop.
onMouseUp
public function onMouseUp( Event e
)
Event handler that fires when a drag/drop obj gets a mouseup
Parameters:
e
: Eventthe mouseup event
Returns:
This method is defined by DragDrop.
padding
public function padding()
The padding configured for this drag and drop object for calculating
the drop zone intersection with this object.
This method is defined by DragDrop.
removeFromGroup
public function removeFromGroup( string sGroup
)
Remove's this instance from the supplied interaction group
Parameters:
sGroup
: stringThe group to drop
Returns:
This method is defined by DragDrop.
removeInvalidHandleClass
public function removeInvalidHandleClass( string cssClass
)
Unsets an invalid css class
This method is defined by DragDrop.
removeInvalidHandleId
public function removeInvalidHandleId( string id
)
Unsets an invalid handle id
This method is defined by DragDrop.
removeInvalidHandleType
public function removeInvalidHandleType( string tagName
)
Unsets an excluded tag name set by addInvalidHandleType
This method is defined by DragDrop.
resetConstraints
public function resetConstraints( boolean maintainOffset
)
resetConstraints must be called if you manually reposition a dd element.
This method is defined by DragDrop.
setDragElId
public function setDragElId( id {string}
)
Allows you to specify that an element other than the linked element
will be moved with the cursor during a drag
This method is defined by DragDrop.
setHandleElId
public function setHandleElId( id {string}
)
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.
This method is defined by DragDrop.
setInitialPosition
public function setInitialPosition( int diffX
, int diffY
)
Stores the initial placement of the linked element.
Parameters:
diffX
: intthe X offset, default 0
diffY
: intthe Y offset, default 0
Returns:
This method is defined by DragDrop.
setOuterHandleElId
public function setOuterHandleElId( id the
)
Allows you to set an element outside of the linked element as a drag
handle
This method is defined by DragDrop.
setPadding
public function setPadding( int iTop
, int iRight
, int iBot
, int iLeft
)
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.
Parameters:
iTop
: intTop pad
iRight
: intRight pad
iBot
: intBot pad
iLeft
: intLeft pad
Returns:
This method is defined by DragDrop.
setXConstraint
public function setXConstraint( int iLeft
, int iRight
, int iTickSize
)
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.
Parameters:
iLeft
: intthe number of pixels the element can move to the left
iRight
: intthe number of pixels the element can move to the
right
iTickSize
: intoptional parameter for specifying that the
element
should move iTickSize pixels at a time.
Returns:
This method is defined by DragDrop.
setYConstraint
public function setYConstraint( int iUp
, int iDown
, int iTickSize
)
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.
Parameters:
iUp
: intthe number of pixels the element can move up
iDown
: intthe number of pixels the element can move down
iTickSize
: intoptional parameter for specifying that the
element should move iTickSize pixels at a time.
Returns:
This method is defined by DragDrop.
startDrag
public function startDrag( int X
, int Y
)
Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.
Parameters:
X
: intclick location
Y
: intclick location
Returns:
This method is defined by DragDrop.
toString
public function toString()
This method is defined by DragDrop.
unlock
public function unlock()
This method is defined by DragDrop.
unreg
public function unreg()
Remove all drag and drop hooks for this element
This method is defined by DragDrop.