Drag and Drop, With Relative/Absolute elements.
Drag and Drop demo.
docs referencesjs code | html code | css code
References to Documentation
var droppables = $$('div.dropper'); var container = $('containment'); new Drag.Move('dragger', {'container': container, 'droppables': droppables}); droppables.addEvent('over', function(){ this.setStyle('background-color', '#000'); }); droppables.addEvent('leave', function(){ this.setStyle('background-color', '#ff3300'); }); droppables.addEvent('drop', function(){ this.setStyle('background-color', '#face8f'); });
<div id="containment"> <div id="dragger"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> <div class="dropper"><!-- --></div> </div>
#containment { height: 210px; width: 330px; background: #eee; position: relative; } #dragger { height: 20px; width: 20px; background: #000; position: absolute; top: 0; left: 0; } div.dropper { margin-left: 10px; margin-top: 10px; float: left; height: 40px; width: 30px; background: #ff3300; }