Tutorial talk:Advanced Custom Drag and Drop Part 2

From Learn About the Ext JavaScript Library

Here is the full code of dd.js an it works fine.

/**

 * Custom Drag & Drop Tutorial
 * by Jozef Sakalos, aka Saki
 * http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
 */

// reference local blank image Ext.override(Ext.dd.DDProxy, {

   startDrag: function(x, y) {
       var dragEl = Ext.get(this.getDragEl());
       var el = Ext.get(this.getEl());

       dragEl.applyStyles({border:,'z-index':2000});
       dragEl.update(el.dom.innerHTML);
       dragEl.addClass(el.dom.className + ' dd-proxy');
   },

onDragOver: function(e, targetId) {

   //console.log('dragOver: ' + targetId);
   if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
       var target = Ext.get(targetId);
       this.lastTarget = target;
       target.addClass('dd-over');
   }

}, onDragOut: function(e, targetId) {

   //console.log('dragOut: ' + targetId);
   if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
       var target = Ext.get(targetId);
       this.lastTarget = null;
       target.removeClass('dd-over');
   }

}, endDrag: function() {

   var dragEl = Ext.get(this.getDragEl());
   var el = Ext.get(this.getEl());
   if(this.lastTarget) {
       Ext.get(this.lastTarget).appendChild(el);
       el.applyStyles({position:, width:});
   }
   else {
       el.applyStyles({position:'absolute'});
       el.setXY(dragEl.getXY());
       el.setWidth(dragEl.getWidth());
   }
   Ext.get('dd1-ct').removeClass('dd-over');
   Ext.get('dd2-ct').removeClass('dd-over');

} }); Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.namespace('Tutorial');

// create application Tutorial.dd = function() {

   // public space
   return {

       // public methods
       init: function() {

     // drop zones
   var dz1 = new Ext.dd.DropZone('dd1-ct', {ddGroup:'group'});
   var dz2 = new Ext.dd.DropZone('dd2-ct', {ddGroup:'group'});


   // container 1
   var dd11 = Ext.get('dd1-item1');
   dd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group');

   var dd12 = Ext.get('dd1-item2');
   dd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group');

   var dd13 = Ext.get('dd1-item3');
   dd13.dd = new Ext.dd.DDProxy('dd1-item3', 'group');


   // container 2
   var dd21 = Ext.get('dd2-item1');
   dd21.dd = new Ext.dd.DDProxy('dd2-item1', 'group');

   var dd22 = Ext.get('dd2-item2');
   dd22.dd = new Ext.dd.DDProxy('dd2-item2', 'group');

   var dd23 = Ext.get('dd2-item3');
   dd23.dd = new Ext.dd.DDProxy('dd2-item3', 'group');