PDA

View Full Version : Drag and Drop multiple targets



Rebecca_
6 Feb 2011, 3:15 AM
It would be great if someone to give me a hand creating more than one target for a drag and drop.

For example - three coloumns and a list of draggables. I would like to correctly sort the draggables onto the correct droppables, say three coloumns with a list of items - where they have to be sorted into the correct columns.

I've tried creating a second instance of the drag and drop example and creating new id names. However both draggables are correct if they are droppped on the last declared droppable name.

See code below. I appreciate any help in the right direction....




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
// Create a new draggable for the div with an
// id of 'draggable'
new Ext.util.Draggable('draggable', {
revert: true
});

// Create a new draggable for the div with an
// id of 'invalid
new Ext.util.Draggable('invalid', {
// Specify a group that won't have a valid
// Droppable target
group: 'invalid',
// Revert the Draggable back to its original
// position on an invalid drop.
revert: true
});

// Create a new Droppable for the div with an
// id of 'droppable'
new Ext.util.Droppable('droppable', {
// Change the validDropMode from the default of 'intersect' to
// 'contains' this ensures that a Draggable must be completed
// contained by the Droppable in order to perform a drop
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
draggable.el.setHTML('Dropped!');
}
}
});


// Create a new draggable for the div with an
// id of 'draggable'
new Ext.util.Draggable('move', {
revert: true
});

// Create a new draggable for the div with an
// id of 'invalid
new Ext.util.Draggable('wrong', {
// Specify a group that won't have a valid
// Droppable target
group: 'wrong',
// Revert the Draggable back to its original
// position on an invalid drop.
revert: true
});

// Create a new Droppable for the div with an
// id of 'droppable'
new Ext.util.Droppable('box', {
// Change the validDropMode from the default of 'intersect' tod
// 'contains' this ensures that a Draggable must be completed
// contained by the Droppable in order to perform a drop
validDropMode: 'contains',
listeners: {
drop: function(box, move, e) {
move.el.setHTML('Dropped2!');
}
}
});

}
});

Rebecca_
15 Feb 2011, 4:46 PM
No one else has had the same problem... ?

evant
15 Feb 2011, 5:10 PM
http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Draggable&member=group
http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Droppable&member=group

Rebecca_
15 Feb 2011, 5:35 PM
group string!

Thanks evant

Fingers crossed i get it working.

nderraugh
20 Jun 2011, 8:06 AM
@Rebecca_ did you get this working?

sreedhar123
21 Sep 2011, 1:08 AM
How did you solved the problem.
I have similar problem in my app.