D&D

Drag and drop

by mowglisanu

HTML

<link rel="stylesheet" href="http://webstar/GGLCustom/extjs/resources/css/ext-all.css">
<h1>Today</h1>
<ul id="today">
    <li>Shopping</li>
    <li>Haircut</li>
</ul>

<h1>Tomorrow</h1>
<ul id="tmrw">
    <li>Wash car</li>
</ul>

JavaScript

new Ext.dd.DragZone('today');
new Ext.dd.DragZone('tmrw');
var drag = document.getElementsByTagName('li');
for (var i = 0; i < drag.length ; i++){
    Ext.dd.Registry.register(drag[i]);
}
var cfg = {onNodeDrop: drop};
new Ext.dd.DropZone('today', cfg);
new Ext.dd.DropZone('tmrw', cfg);
function drop(dropNodeData, source, event, dragNodeData){
    var dragged = source.dragData.ddel;
    var destinationContainer = this.getEl();
    
    destinationContainer.appendChild(dragged.cloneNode());
    
    return true;
}