PDA

View Full Version : Multiple Drag and Drop?



metty
26 Oct 2010, 7:06 AM
Hey folks!

I've got another question. I am just working with Sencha Touch Framework since a couple of days and now I want to create multiple Drag and Drop Areas. I have to build 3 boxes to drag in 3 droppable areas. It should be possible to drag any box in any droppable area. I tried to work with groups and searched with google. But I don't get it. Anyone got any information to solve this problem? Here is my code:

HTML:


<div id="draggables">
<div id="draggable-1" class="draggable-el">Draggable 1</div>
<div id="draggable-2" class="draggable-el">Draggable 2</div>
<div id="draggable-3" class="draggable-el">Draggable 3</div>
</div>
<div id="droppables">
<div id="droppable-1" class="droppable-el"></div>
<div id="droppable-2" class="droppable-el"></div>
<div id="droppable-3" class="droppable-el"></div>
</div>


Javascript:


this.drag1 = new Ext.util.Draggable('draggable-1', {
group: 'dd',
revert: true
});

this.drag2 = new Ext.util.Draggable('draggable-2', {
group: 'dd',
revert: true
});

this.drag3 = new Ext.util.Draggable('draggable-3', {
group: 'dd',
revert: true
});


this.drop1 = new Ext.util.Droppable('droppable-1', {
group: 'dd',
validDropMode: 'contains',
listeners: {
drop: function(droppable1, draggable1, e1) {
console.log('foo1');
}
}
});

this.drop2 = new Ext.util.Droppable('droppable-2', {
group: 'dd',
validDropMode: 'contains',
listeners: {
drop: function(droppable2, draggable2, e2) {
console.log('foo2');
}
}
});

this.drop3 = new Ext.util.Droppable('droppable-3', {
group: 'dd',
validDropMode: 'contains',
listeners: {
drop: function(droppable3, draggable3, e3) {
console.log('foo3');
}
}
});


Thanks in advance!

Cheers
Metty

metty
26 Oct 2010, 11:13 PM
Anyone got any idea?!