Cross-posted from here because it applies to Ext4 as well.

Ext version tested:

  • Ext 3, Ext 4

css used:

  • only default ext-all.css

Browser versions tested against:
Not relevant

Operating System:
Not relevant


  • If a dragged object is released where drop isn't allowed, repair animation starts
  • If we'll try to drag (i.e. mousedown) another draggable object while repair animation is still running, no DnD will be initiated. Only text will be selected.

This is frustrating and breaks UX because it doesn't allow quick operation inside application.
This takes place only when DnD was invalid and doesn't happen if DnD was successful.

Test Case:
Steps to reproduce the problem:
Simply try any DnD example (I suggest this): try rapidly performing invalid drag'n'drops (that is dragging a draggable object to any place outside allowed drop area).

The result that was expected:
To be able to initiate a new DnD while repair animation from previous DnD is still runing.

The result that occurs instead:
Unable to perform the described above.

Debugging already done:
The cause of the problem is the fact that the dragging property of Ext.dd.DragSource is set to false only when animation finishes, in the following callback function:
afterRepair : function(){
            this.el.highlight(this.hlColor || "c3daf9");
        this.dragging = false;
Clearly, new drag operation isn't initiated if this peoperty is true:
handleMouseDown : function(e){
        if(this.dragging) {
Possible fix:

  • not provided

I'm going to try and set dragging to false immediately when invalid DnD is performed, not in repair callback function.
I suspect though that there may be problems that ExtJS devs were aware of when designing Ext.dd as this problem (at least I consider this a problem) still exists in ExtJS4.

Looking forward for official feedback!