SkyByteDD.js - Drag and Drop Example
Features:
- Each "Drop" element on the page may accept or deny "Drag" elements if Drop.accept options is set
- "Drag" element can move the parent container along with it if Drag.self option is set.
Known issues: Drags do not scroll window yet. Fix coming in next release.
Drag Objects
Drag DIV
Drag me with Container
Drop Zone: Accepts Everything (Recycle Bin)
Drop Zone: Accepts only IMAGES
Drop Zone: Accepts Everything
Controlling Functions
- Make Everything on this page Draggable
- Make Everything on this page Draggable
Syntax:
new Drag('element_id', [options]);
new Drop('element_id', [options]);
Example:
new Drag('element_id',{
classname : 'drag', //class name of the drag element
caption : 'moving #1' //caption on mouse move
});
new Drop('element_id',{
classname : 'drop', //class name of the drop element
accept : 'IMG', //accept filter by tag name or leave empty to accept all
caption : 'Drop Zone', //caption displayed when element over drop zone and accepted by rule
mouseUp : function(d,e){ e.parentNode.removeChild(e); }, //function fired when mouse button released
mouseOver : function(d,e){ d.src='drop-bin-on.gif'; }, //function fired when mouse over zone
mouseOut : function(d,e){ d.src='drop-bin-off.gif'; } //function fired when mouse left the zone
});
where: d=drop element, e=drag element