Multiple DragZones

[srohweder]

Hey,

ive tried yesterday to solve a problem with 2 DataViews and DropZones, now i`ve broken down the Problem to a simple example.

Only 2 divs and the wish to drag and drop between those 2 divs. The Problem is the dropping on both areas.

It only works on one div, in this case from homezone to unlinkzone but not the other way. If i switch the initialisation of the 2 DragZones the behavior is the other way around.

Is it only possible to have one DragZone in the script ?
do I miss something important i didnt saw in the Docs ?

<div id="unlinkzone" style="width:50%;height:50%;">
<div class="thumb"><img width="90" src="home_photo_1.jpg"></div>
<div class="thumb"><img width="90" src="home_photo_2.jpg"></div>
<h2>Unlinkzone</h2>
</div>

<div id="homezone" style="width:50%;height:50%;">
<div class="thumb"><img width="90" src="home_photo_3.jpg"></div>
<div class="thumb"><img width="90" src="home_photo_4.jpg"></div>
<h2>Homezone</h2>
</div>

Ext.onReady(function(){

    Ext.QuickTips.init();

        
    var dragzone2 = new Ext.dd.DragZone(Ext.get('homezone'),{
        ddGroup: 'home',
        getDragData: function(e){
            var sourceEl = e.getTarget('.thumb');
            if(sourceEl){
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                  ddel: d,
                  repairXY: Ext.fly(sourceEl).getXY()
                }
            }
        },
        getRepairXY: function(){
          return this.dragData.repairXY;
        }
    });
            
    var dropzone2 = new Ext.dd.DropTarget(Ext.get('homezone'),{
        ddGroup: 'unlinked',
        notifyDrop: function(source, id){
          alert('drop on homezone');
        }
    });
    
    var dragzone = new Ext.dd.DragZone(Ext.get('unlinkzone'),{
        ddGroup: 'unlinked',
        getDragData: function(e){
            var sourceEl = e.getTarget('.thumb');
            if(sourceEl){
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return {
                  ddel: d,
                  repairXY: Ext.fly(sourceEl).getXY()
                }
            }
        },
        getRepairXY: function(){
           return this.dragData.repairXY;          
        }
    });

    
    var dropzone = new Ext.dd.DropTarget(Ext.get('unlinkzone'),{
        ddGroup:'home',
        notifyDrop: function(source, id){
          alert('drop on unlinkzone');
        }
    });
    

   
});

[srohweder]

Updated and simplified code

[srohweder]

Hey do I missed something in the description of the Code or is this something extremly obvious so noone answers ? Or is it too easy and I should know ?

srohweder

[srohweder]

polite bump,
no one has answers on this ? even if its only the info that the example does not run ?

I figured out that the Code works when the ddGroups left out, but in this case you can drop everywhere in the dropzones, thats not the goal.

I made an image of the behavior I will achieve
dnd_dragzones.png