Sencha Touch version tested:
  • 1.03
  • only default ext-all.css

Platform tested against:
  • iOS 4.3.3
  • Safari 5.1
  • Chrome (OSX) 15.0.839.0

  • If an Ext.util.Draggable object is created with revert set to false, and then the object is moved to a position on the screen and let go, any future intersection detection fails to occur at the correct location.

    See for original post of problem.

Test Case:

Using the dragdrop example code from the distribution, in index.js change revert to false as per the following snippet.
// Setup the Sencha Touch app.
    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: false
Steps to reproduce the problem:
  • After making the change described above, open the web page and move the left Draggable block a few inches to the right.
  • Now drag it back fully into the Droppable area.

The result that was expected:
  • The Droppable area should go dark green, indicating that the Draggable is contained within it.

The result that occurs instead:
  • The Droppable area stays light green indicating that the dropenter event did not fire.

Debugging already done:
  • I edited the source code to log draggable.region.left and for the Draggable as it moves. The co-ordinates are as expected during the drag operation and after letting go of the Draggable. However, once you start to drag it again, the co-ordinates jump up/down unexpectedly. It turns out that the delta is equal to the Draggable.offset values. Because the draggable.region is now offset from where it should be, when it is compared with droppable.region (in the Ext.util.Droppable.isDragOver private method), the intersection occurs at the wrong location.

Possible fix:
  • not provided