Drag and Drop
Drag and Drop demo.
docs referencesjs code | html code | css code
References to Documentation
var fx = []; $$('#draggables div').each(function(drag){ new Drag.Move(drag, { droppables: $$('#droppables div') }); drag.addEvent('emptydrop', function(){ this.setStyle('background-color', '#faec8f'); }); }); $$('#droppables div').each(function(drop, index){ fx[index] = drop.effects({transition:Fx.Transitions.Back.easeOut}); drop.addEvents({ 'over': function(el, obj){ this.setStyle('background-color', '#78ba91'); }, 'leave': function(el, obj){ this.setStyle('background-color', '#1d1d20'); }, 'drop': function(el, obj){ el.remove(); fx[index].start({ 'height': this.getStyle('height').toInt() + 30, 'background-color' : ['#78ba91', '#1d1d20'] }); } }); });
<div id="draggables"> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> <div class="drag"></div> </div> <div id="droppables"> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> <div class="drop"></div> </div>
#draggables { height: 100px; position: relative; } #draggables div { top: 10px; left: 10px; width: 50px; height: 50px; cursor: move; background: #c17878; position: absolute; } #droppables div { float: left; margin: 10px; width: 100px; height: 100px; background: #1d1d20; }