View Full Version : Draggable revert fails when >1 Droppable in same group

4 Aug 2011, 10:42 AM
B]Sencha Touch version tested:[/B]


only default ext-all.css
Platform tested against:

iOS 4.3.3
Chrome (OSX) 15.0.839.0

Let's say you have more than one Ext.util.Droppable in the same group, and you have an Ext.util.Draggable in that group with revert set to true. When you drop the Draggable onto one of the Droppables, the Draggable should not revert to the original position. It should only revert if it is not dropped onto a Draggable. However, when more then one Droppable in the same group is present, it may or may not revert, depending on the order in which the Droppables were created.
Debugging already done:

The problem lies in the fact that the Droppable is responsible for telling the Draggable whether to revert, according to whether the Draggable is over it at the time. This is fine when there is only one Droppable. When there are multiple Droppables, they are all telling the Draggable whether to revert. All will tell it to revert, except for the one that it is actually over. Depending on which Droppable had the last say, the Draggable may or may not revert.
More specifically... When a Droppable detects a valid Draggable over it that is about to be dropped, it sets the Draggable's cancelRevert property to true (in the Droppable's onBeforeDragEnd method). When the Draggable is dropped, if cancelRevert is true then the Draggable stays where it is rather than reverting to it's original position.
However, let's say there is a second Droppable in the same group, Droppable B. Let's call the original Droppable Droppable A. When the Draggable is dropped over Droppable A, Droppable B's onBeforeDragEnd method also sets the Draggable's cancelRevert, in this case to false (because the Draggable is not over Droppable). If Droppable B sets the draggable's cancelRevert property after Droppable A does, then the Draggable will revert to it's original position even though it was dropped on draggable A.
Possible fix:

I'm working on it...

4 Aug 2011, 11:03 AM
Possible fix:

Use this.canDrop to only allow the Droppable that the Draggable is over to change cancelRevert. Modify onBeforeDragEnd in Ext.util.Droppable to be:

// @private
onBeforeDragEnd: function(draggable, e) {
if (this.canDrop) {
draggable.cancelRevert = true;

15 Aug 2011, 5:18 AM
Bumped, after 2 weeks, in the hope that Sencha will log this...

9 Sep 2011, 2:24 AM
I'd like to add my voice to this. I'm trying to create multiple Droppable zones but the Draggable always gets reverted. If I change to just having one it works as expected.

PowderHound's analysis appears to be what I am experiencing too.

16 Sep 2011, 1:42 AM
I'm having the same issue. Sencha Touch team, any news about a fix in the next release ?

I've overrided the Droppable class with the fix provided by Powderhound, works fine (Thanks !).