From ProtoScript
litrtro ornochic4 ordronnoz darcamont dardarbocze monbotacn
Contents |
YUI:DragDrop Behavior
Adds drag & drop handling to an element or set of elements.
Example
$proto('#photo-list img', {
DragDrop: {
dropTarget: '#avatar',
onDragEnter: {
target: '$drop',
ReplaceClass: {
removeClass: 'not-dragged-over',
addClass: 'dragged-over'
}
},
onDragOut: {
target: '$drop',
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
},
onDragDrop: {
target: '$drop',
SetHtml: {
copyFrom: '$drag'
},
Fade: {
opacity: {to: 0.5},
duration: 0.1,
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.1,
onComplete: {
target:'$drag',
Move: {
points: { by: [10, 0] }
},
Fade:{ opacity: {to:0.8}}
}
}
}
},
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
}
}
});
This makes a set of images contained inside a photo list ('#photo-list img') draggable. They may be be dropped on an element with ID='avatar'.
When dragging over (onDragEnter) the drop zone (#avatar - specified by $drop), the border of the drop zone will be highlighted (the class 'dragged-over' has a style of 'border:2px solid blue').
When dragging out (onDragOut) of the the drop zone (#avatar - specified by $drop), the border of the drop zone will be non-highlighted (the class 'not-dragged-over' has a style of 'border:2px solid transparent').
Once one of the dragged images is dropped (onDragDrop) on the avatar, we copy the HTML from the dragged image (copyFrom: $drag) and replace the avatar with it (target:$drop). Simultaneously we Fade the dropped item down to 50% in 1/10 of second and switch the border off (ReplaceClass). There are two special values ($drag & $drop) that give you access to the specific object being dragged or dropped. See the section: Pseudo Targets.
When that finishes we quickly fade back up to 100% (in 1/10 second). Then once it is back to normal opacity, we take the original dragged item (target:$drag) and both animate a move to the right by 10 pixels and Fade it to 80%.
Attributes
| Name | Description | Default | Valid Values | Example |
|---|---|---|---|---|
| target | Selected element or elements to make draggable | No value. If no value supplied, use the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope | String value denoting an interface element or elements. See Selecting Elements | target: 'img' (all images) |
| dropTarget | Selected ele
1000 ment or elements that will be the valid drop target for the draggable elements. | No value. If no value supplied, use the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope | String value denoting an interface element or elements. See Selecting Elements | dropTarget: 'div#drop-area' (a div with id=drop-area) |
| interactionGroup | Drag and drop happens between drag objects and drop targets that are in the same interactionGroup. If no interactionGroup is specified all drag objects (the target the DragDrop is in the scope of) and all drop targets (specified by dropTarget attribute). You can specify a name for the group or take the default. If you are putting more than one DragDrop behavior on a page, you should name the interactionGroup to keep them separate. You can also specify a more complex interactionGroup. See the section below Multiple Interaction Groups. | 'proto-yui-group' | either a name or specify Multiple Interaction Groups as discussed below. | interactionGroup: 'my-group' |
Multiple Interaction Groups
Instead of just providing a single name (and hence a single group) for the interactionGroup, you can specify multiple interactionGroups each with their own name, set of drag targets and set of drop targets to associate together.
You specify multiple interaction groups by creating a list of attribute sets. Here is an example:
$proto('#my-pix-3 img', {
SetStyle: {cursor:'move'},
DragDrop: {
dropTarget: '#people, #things',
// This allows us to wire up drag items with drop areas
interactionGroup: [
// wire the people images and the people drop zone together
{
name: 'people-group',
dragTarget: '#my-pix-3 img.people',
dropTarget: '#people'
},
// wire the thing images and the thing drop zone together
{
name: 'things-group',
dragTarget: '#my-pix-3 img.things',
dropTarget: '#things'
}
],
interactionGroup Attributes
Here are the attributes for a multiple interaction group:
| Name | Description | Default | Valid Values | Example |
|---|---|---|---|---|
| name | Name of the interaction group that will bind dragTargets and dropTargets together in a drag drop relationship. | No value. | Any string name. | name: 'people-group' |
| dragTarget | String representing a set of element or elements that are draggable. See Selecting Elements | No value. | String value denoting an interface element or elements. See Selecting Elements | dragTarget: '#my-pix' |
| dropTarget | String representing a set of element or elements that are drop targets. See Selecting Elements | No value. | String value denoting an interface element or elements. See Selecting Elements | name: '#people' |
Pseudo Targets
During drag and drop you often need access to the which object is currently being dragged and which object is being dropped onto. During the onDragEnter, onDragOver, onDragOut and onDragDrop the following pseudo targets are defined:
- $drag defines the current drag object.
- $drop defines the current place we are dropping the drag object.
Callbacks
| Name | Description |
|---|---|
| onStartDrag | Called when the drag is initiated. |
| onDrag | Called for each mouse move during the drag operation. |
| onDragEnter | Called when the drag object enters a valid drop target. Two special pseudo values are defined: $drag defines the current drag object; $drop defines the current place we are dropping the drag object. |
| onDragOver | Called for each mouse move when the drag object is over a valid drop target. Two special pseudo values are defined: $drag defines the current drag object; $dr
1000 op defines the current place we are dropping the drag object. |
| onDragDrop | Called when the mouse is released while the drag object is over a valid drop target. Signifies the actual drop action. Two special pseudo values are defined: $drag defines the current drag object; $drop defines the current place we are dropping the drag object. |
| onDragOut | Callend when the drag object leaves a valid drop target. Two special pseudo values are defined: $drag defines the current drag object; $drop defines the current place we are dropping the drag object. |
| onEndDrag | Called at the very end of the drag operation (regardless of whether the drop was valid or invalid). |
| onMouseUp | Called when the mouse is released during the drag operation. Will be followed by onDragDrop or onInvalidDrop and onEndDrag. |
| onInvalidDrop | Called when the drag object is dropped outside of any valid target. |
Demos
See DragDrop Demo
