YUI: Drag Drop Example
#outer
#inner
Drag Me
The HTML
<div id="outer"> #outer <div id="inner">#inner</div> </div> <div id="drag">Drag Me</div>
The CSS
#demo { position: relative; border: 1px solid black; background-color: #ccc; margin: 2em; } #outer { width: 300px; height: 300px; border: 1px solid black; position:relative; background-color: #fff; margin: 1em; } #inner { width: 200px; height: 200px; border: 1px solid black; position: relative; left: 50px; top: 50px; } #drag { width:100px; height:100px; border:1px solid black; position: absolute; top: 10px; right: 10px; cursor: move; }
The Javascript
function init() { new YAHOO.util.DDTarget('inner', 'test'); new YAHOO.util.DDTarget('outer', 'test'); a = new YAHOO.util.DDProxy('drag', 'test'); a.onDrag = function() { this.dropped = false; this.dropTarget = null; } a.onDragOver = function(e, id) { var target = YAHOO.util.Dom.get(id); if (!this.dropTarget) { this.dropTarget = target; } YAHOO.util.Dom.setStyle(target, 'border', '1px solid red'); } a.onDragOut = function(e, id) { var target = YAHOO.util.Dom.get(id); YAHOO.util.Dom.setStyle(target, 'border', '1px solid black'); } a.onDragDrop = function(e, id) { if(this.dropped) { return; } if (this.dropTarget) { this.dropTarget.appendChild(YAHOO.util.Dom.get(this.id)); this.dropped = true; } } a.endDrag = function(e, id) { YAHOO.util.Dom.setStyle(this.element, 'left', '0px'); YAHOO.util.Dom.setStyle(this.element, 'top', '0px'); } } YAHOO.util.Event.addListener(window, 'load', init);