Demo of DragDrop Behavior
Drag from a Set to One Place
Each of the images below has been set as draggable. They may be dropped into the 'Send It' dotted box below the images.
When you hover over an image you get a 'move' style cursor. Hovering over the drop area (Send It) will cause it to highlight it's border solid blue.
If you drop the image into the 'Send It' box:
- a copy of the image is displayed there
- it flashes momentarily to let you know the drop happened
- the original image fades to 50% (showing it has been sent)
- and the dotted border is returned to the 'Send It' box
You can click here to restart the example.
My Pix
Send It
The code below is commented to show each step of the interaction described above.
SetStyle: {cursor:'move'}, //move cursor for each img
DragDrop: {
// set the dropTarget to our drop area
dropTarget: '#send-it',
// show blue border when over drop area
onDragEnter: {
target: '$drop',
ReplaceClass: {
removeClass: 'not-dragged-over',
addClass: 'dragged-over'
}
},
// return to normal border when not over drop area
onDragOut: {
target: '$drop',
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
},
// when drop happens:
// 1) select the drop area as our target (behaviors now operate on it)
// 2) clone the dragged image into drop area
// 3) signal the drop happened
// a) flash the drop target (fade down/then back up)
// b) dim the dragged image
// 4) return the border of drop area to normal
onDragDrop: {
// (1) target
target: '$drop',
// (2) copy
SetHtml: {
copyFrom: '$drag'
},
// (3) flash & fade
Fade: {
opacity: {to: 0.5},
duration: 0.1,
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.1,
onComplete: {
target:'$drag',
Fade:{ opacity: {to:0.5}}
}
}
}
},
// (4) unhighlight
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
}
}
});
Drag from a Set to Multiple Places (All Valid)
Same story as before. This time we have multiple places we can drop them. Setting the dropTarget to a string with a comman-separated list of selectors allows us to create multiple drop zones.
You can click here to restart the example.
My Pix
Like It
Love It
The code below is commented to show each step of the interaction described above.
SetStyle: {cursor:'move'}, //move cursor for each img
DragDrop: {
// set the dropTarget to our drop area
dropTarget: '#like-it, #love-it',
interactionGroup: 'my-like-love-group',
// show blue border when over drop area
onDragEnter: {
target: '$drop',
ReplaceClass: {
removeClass: 'not-dragged-over',
addClass: 'dragged-over'
}
},
// return to normal border when not over drop area
onDragOut: {
target: '$drop',
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
},
// when drop happens:
// 1) select the drop area as our target (behaviors now operate on it)
// 2) clone the dragged image into drop area
// 3) signal the drop happened
// a) flash the drop target (fade down/then back up)
// b) dim the dragged image
// 4) return the border of drop area to normal
onDragDrop: {
// (1) target
target: '$drop',
// (2) copy
SetHtml: {
copyFrom: '$drag'
},
// (3) flash & fade
Fade: {
opacity: {to: 0.5},
duration: 0.1,
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.1,
onComplete: {
target:'$drag',
Fade:{ opacity: {to:0.5}}
}
}
}
},
// (4) unhighlight
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
}
}
});
Drag from a Set to Multiple Places (Different Valid Spots)
In this example, we still have multiple places we can drop our images. The difference this time is you can only drop pictures of people into the 'People' spot and pictures of things into the 'Things' spot.
This is accomplished by creating a more complex 'interactionGroup'. Instead of giving a single group name (interactionGroups match drag objects to drop areas) we provide a list of two interaction groups -- one for people; the other for things.
Each group has a name (the name of the interaction group), a set of dragTargets and dropTarget that belong in the same group. The four images that have a class name of 'people' get matched with the drop area whose id name is 'people' (not because they have the same name, but because of the mapping in the interactionGroup.)
Same thing happens for the pictures of things. The eight images that have a class name of 'things' get mapped to the drop area whose id name is 'things' (again due to the mapping not that we named the id & class the same).
You can click here to restart the example.
My Pix
People
Things
The code below is commented to show each step of the interaction described above.
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'
}
],
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',
Fade:{ opacity: {to:0.5}}
}
}
}
},
ReplaceClass: {
removeClass: 'dragged-over',
addClass: 'not-dragged-over'
}
}
}
});
For a full description of this behavior see the DragDrop Documentation Page.