-
▼.isDraggable
-
The "isDraggable" property specifies whether an AccDC Object is draggable.
-
Values: True or False (default)
Syntax
$A([
{
isDraggable: true,
...
}
]);
// Or
$A.reg.myObj.isDraggable = false;
Important
-
When "isDraggable" is changed programmatically, the change will take affect the next time the AccDC Object opens;
-
The ".setDrag()" or ".unsetDrag()" methods can be used to add or remove "drag" and "drop" event bindings at runtime;
-
▼.drag
-
The "drag" property configures the drag functionality for an AccDC Object.
-
Defaults
{ handle: null, minDistance: 0, maxX: null, maxY: null, persist: false, confineTo: null, init: null, override: null }
Definitions
-
handle (Optional)
-
A CSS Selector or DOM node that specifies a drag handle within an AccDC Object.
-
minDistance (Optional)
-
An integer value specifying a minimum range of pixels to move before dragging is activated.
-
maxX (Optional)
-
An integer value specifying the maximum horizontal drag range in pixels.
-
maxY (Optional)
-
An integer value specifying the maximum vertical drag range in pixels.
-
persist (Optional)
-
A boolean value specifying whether current coordinates will be saved/restored when a draggable AccDC Object is closed/opened.
-
confineTo (Optional)
-
A CSS Selector or DOM node that specifies a container element to use as the top/right/bottom/left boundaries where dragging is not permitted to pass.
-
init (Optional)
-
A function declaration that will override the initial event when dragging is first initialized by clicking the draggable AccDC Object.
drag: {
init: function(ev, dd, dc){
// Do something
},
...
}
-
override (Optional)
-
A function declaration that will override the default calculations so that custom dragging functionality is possible.
drag: {
override: function(ev, dd, dc){
// Do something with dd.offsetX and dd.offsetY
},
...
}
Syntax
$A([
{
drag: {
handle: '#dragImg',
confineTo: 'div.box',
persist: true,
init: function(ev, dd, dc){
// Do something
}
},
...
}
]);
// Or
$A.reg.myObj.drag.override = function(ev, dd, dc){
// Do something with dd.offsetX and dd.offsetY
};
Important
-
When "drag" properties/methods are changed programmatically, the change will take affect the next time the AccDC Object opens.
-
The ".setDrag()" or ".unsetDrag()" methods can be used to add or remove "drag" and "drop" event bindings at runtime;
-
▼dd (Drag Data)
-
The "dd" object is passed as an argument to all drag event handlers.
-
Properties
-
target (DOM Node)
-
The drag element to which the event handler has been bound. (Always the same as "this" within a drag event handler)
-
drag (DOM Node)
-
The dragged element to which the drag event has been bound.
-
proxy (DOM Node)
-
The dragged element which determines the drop target tolerance.
-
drop (Array)
-
An array of all active drop targets for the current drag instance.
-
available (Array)
-
An array of all available drop targets for the current instance.
-
update (Method)
-
Helper function that updates the locations of all available drop targets in the current drag instance.
-
startX (Number)
-
The horizontal location of the "mousedown" event.
-
startY (Number)
-
The vertical location of the "mousedown" event.
-
deltaX (Number)
-
The horizontal distance moved from "startX".
-
deltaY (Number)
-
The vertical distance moved from "startX".
-
originalX (Number)
-
The starting horizontal position of the dragged element.
-
originalY (Number)
-
The starting vertical position of the dragged element.
-
offsetX (Number)
-
The moved horizontal position of the dragged element.
-
offsetY (Number)
-
The moved vertical position of the dragged element.
-
▼.onDragStart() (Event)
-
The "onDragStart()" handler is fired when the mouse moves a minimum distance.
-
Return false to cancel dragging.
Syntax
$A([
{
onDragStart: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDragStart = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
▼.onDrag() (Event)
-
The "onDrag()" handler is fired every time the mouse moves when dragging.
-
Return false to instantly fire "onDragEnd()".
Syntax
$A([
{
onDrag: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDrag = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
▼.onDragEnd() (Event)
-
The "onDragEnd()" handler is fired after all other drag and drop handlers have fired.
-
Syntax
$A([
{
onDragEnd: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDragEnd = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
▼.dropTarget
-
The ".dropTarget" property specifies one or more drop targets.
-
Values: CSS Selector or DOM node
Syntax
$A([
{
dropTarget: 'div.target',
...
}
]);
// Or
$A.reg.myObj.dropTarget = document.getElementById('target');
Required:
-
The "isDraggable" property must be set to True.
-
▼drop
-
The ".drop" object configures the drop functionality for an AccDC Object.
-
Options
-
mode (String) Default: "overlap"
-
The specified tolerance mode.
Accepted values: "fit", "intersect", "middle", "overlap"
-
tolerance (Method) Default: null
-
An optional override to use as a tolerance checker.
Must return True or False
-
delay (Number) Default: 20
-
The frequency in milliseconds to check for drop target tolerances.
(Executes the "tolerance()" method when an override is declared.)
Syntax
$A([
{
drop: {
mode: 'overlap'
},
...
}
]);
// Or
$A.reg.myObj.drop.delay = 30;
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼.accDD
-
The ".accDD" property configures drag and drop functionality for screen reader and keyboard only users.
-
Options
-
on (Boolean) Default: false
-
Enable or disable drag and drop support for keyboard access.
-
dragText (String) Default: 'Drag'
-
The action text that will be prepended to the AccDC Object's "role" property within a hidden drag link.
(The hidden drag link becomes temporarily visible to keyboard only users when tabbing through active elements.)
-
dropText (String) Default: 'Drop'
-
The action text that will be prepended to the AccDC Object's "role" property within a hidden drop link.
(The hidden drop link becomes temporarily visible to keyboard only users when tabbing through active elements.)
-
actionText (String) Default: 'Dragging'
-
The active state text that will be prepended to the AccDC Object's "role" property within a hidden drag link.
(The hidden drag link becomes temporarily visible to keyboard only users when tabbing through active elements.)
-
dragClassName (String) Default: ''
-
Optional class(s) that will be added to the hidden drag link when rendered for keyboard only users.
-
dropClassName (String) Default: ''
-
Optional class(s) that will be added to the hidden drop link when rendered for keyboard only users.
-
dragLinkStyle (Object) Default: {}
-
Optional CSS values to be added to the hidden drag link when rendered for keyboard only users.
-
dropLinkStyle (Object) Default: {}
-
Optional CSS values to be added to the hidden drop link when rendered for keyboard only users.
-
dropAnchor (String) Default: ''
-
CSS Selector or DOM node that specifies an optional strategic insertion point where drop links will be inserted into the DOM.
-
dropAnchors (Array) Default: null || []
-
Array of DOM nodes where drop links will be strategically inserted into the DOM.
(Automatically populated at runtime)
-
duration (Number) Default: 500
-
Time length in milliseconds that will be applied to the drag animation.
Syntax
$A([
{
accDD: {
on: true,
dropAnchor: 'div.dropZone ol.drop'
},
...
}
]);
// Or
$A.reg.myObj.accDD.dropLinkStyle = {
backgroundColor: 'black',
color: 'white',
fontSize: '0.8em'
};
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼dd (Drop Data)
-
The "dd" object is passed as an argument to all drop event handlers.
-
Properties
-
target (DOM Node)
-
The drop element to which the event handler has been bound. (Always the same as "this" within an event handler)
-
drag (DOM Node)
-
The dragged element to which the drag event has been bound.
-
proxy (DOM Node)
-
The dragged element, which determines the drop target tolerance.
-
drop (Array)
-
Array of all active drop targets for the current drag instance.
-
available (Array)
-
Array of all available drop targets for the current drag instance.
-
update (Method)
-
Helper function that updates the locations of all available drop targets in the current drag instance.
-
startX (Number)
-
The horizontal location of the "mousedown" event.
-
startY (Number)
-
The vertical location of the "mousedown" event.
-
deltaX (Number)
-
The horizontal distance moved from "startX".
-
deltaY (Number)
-
The vertical distance moved from "startX".
-
originalX (Number)
-
The starting horizontal position of the dragged element.
-
originalY (Number)
-
The starting vertical position of the dragged element.
-
offsetX (Number)
-
The moved horizontal position of the dragged element.
-
offsetY (Number)
-
The moved vertical position of the dragged element.
-
▼.dropInit() (Event)
-
The ".dropInit" handler is fired after "drag.init()" when dragging first initiates.
-
Return false to make the drop target unavailable for the current drag action.
Syntax
$A([
{
dropInit: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.dropInit = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼.onDropStart() (Event)
-
The "onDropStart()" handler is fired when the dragged element moves within the tolerance of a drop target element.
-
Syntax
$A([
{
onDropStart: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDropStart = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼.onDrop() (Event)
-
The "onDrop()" handler is fired when the dragged element is dropped within the tolerance of a drop target element.
-
Syntax
$A([
{
onDrop: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDrop = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼.onDropEnd() (Event)
-
The "onDropEnd()" handler is fired when the dragged element moves out of the tolerance of a drop target element.
-
Syntax
$A([
{
onDropEnd: function(ev, dd, dc){
// Do something
},
...
}
]);
// Or
$A.reg.myObj.onDropEnd = function(ev, dd, dc){
// Do something
};
Required:
-
The "isDraggable" property must be set to True.
-
The "dropTarget" property must specify one or more drop zones.
-
▼.setDrag()
-
The ".setDrag()" method manually adds drag/drop bindings for an open AccDC Object.
-
Syntax
$A([
{
runAfter: function(dc){
dc.setDrag();
},
...
}
]);
// Or
$A.reg.myObj.setDrag();
Required:
-
The "isDraggable" property must be set to True;
-
The AccDC Object must be open when "setDrag()" is invoked.
-
▼.unsetDrag()
-
The ".unsetDrag()" method manually removes drag/drop bindings for an open AccDC Object.
-
Syntax
$A([
{
runAfter: function(dc){
dc.unsetDrag();
},
...
}
]);
// Or invoke unsetDrag; including all drop events as well
$A.reg.myObj.unsetDrag(true);
Required:
-
The "isDraggable" property must be set to True;
-
The AccDC Object must be open when "unsetDrag()" is invoked.
-
▼.cancel
-
The ".cancel" property can be used to cancel the opening of an AccDC Object.
-
Syntax
$A([
{
runBefore: function(dc){
// If condition
dc.cancel = true;
},
// Or
runDuring: function(dc){
// If condition
dc.cancel = true;
},
...
}
]);
-
▼.loading
-
The ".loading" property reflects the opening state of an AccDC Object.
-
Syntax
$A([
{
runBefore: function(dc){
alert(dc.loading); // False
},
runDuring: function(dc){
alert(dc.loading); // True
},
runAfter: function(dc){
alert(dc.loading); // False
},
...
}
]);
// Or
alert($A.reg.myObj.loading);
-
▼.loaded
-
The ".loaded" property reflects the open state of an AccDC Object.
-
Syntax
$A([
{
runAfter: function(dc){
alert(dc.loaded);
},
...
}
]);
// Or
alert($A.reg.myObj.loaded);
-
▼.closing
-
The ".closing" property reflects the closing state of an AccDC Object.
-
Syntax
alert($A.reg.myObj.closing);
-
▼.lock
-
The ".lock" property locks an AccDC Object in its current open/closed state.
-
Syntax
$A([
{
runAfter: function(dc){
dc.lock = true;
},
...
}
]);
// Or
$A.reg.myObj.lock = false;