Results 1 to 4 of 4

Thread: Ext.view.DropZone position indicator left visible when dragging to another DropZone

    You found a bug! We've classified it as EXTJS-23620 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2007
    Posts
    16

    Default Ext.view.DropZone position indicator left visible when dragging to another DropZone

    Hi,

    I've noticed that since upgrading from ext-6.0.2 to ext-6.2.1, that if you drag an item quickly from one Ext.view.DropZone to another, that the green position indicator is left visible in the first DropZone.

    I've created a fiddle below that should demonstrate the issue.



    If you switch to ext-6.0.2, you should no longer be able replicate the issue.

    Thanks

    Edit: I've also attached this gif of me reproducing the issue.
    dropzoneissue.gif

  2. #2

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2007
    Posts
    16

    Default

    Hi,

    It seems like this was caused by a re-ordering of the events fired in Ext.dd.DragDropManager.fireEvents and what that does to the cachedTarget property in Ext.dd.DragSource. In 6.0.2 drag-out events were fired before drag-enter events. In 6.2.1 drag-out events are fired after drag-enter events.

    In 6.0.2 it plays out like this;

    * drag-out events fired
    * Ext.dd.DragSource.onDragOut called
    * cachedTarget is the view being "left"
    * notifyOut is called on the Ext.view.DropZone being "left"
    * Indicator on view being "left" is hidden

    * drag-enter events fired
    * Ext.dd.DragSource.onDragEnter called
    * cachedTarget is set to the view being "entered"

    And in 6.2.1;

    * drag-enter events fired
    * Ext.dd.DragSource.onDragEnter called
    * cachedTarget is set to the view being "entered"

    * drag-out events fired
    * Ext.dd.DragSource.onDragOut called
    * cachedTarget is the view being "entered"
    * notifyOut is called on the Ext.view.DropZone being "entered"
    * Indicator on view being "entered" is hidden
    * Indicator on view being "left" is left visible

    As a workaround, I've overridden Ext.dd.DragDropManager.fireEvents and moved the code that fires the drag-enter events below that which fires the drag-out events.

    Code:
    fireEvents: function(e, isDrop) {
    ...
        if (me.mode) {
            if (overEvts.length) {
                dragCurrent.b4DragOver(e, overEvts);
                dragCurrent.onDragOver(e, overEvts);
            }
    
            if (dropEvts.length) {
                dragCurrent.b4DragDrop(e, dropEvts);
                dragCurrent.onDragDrop(e, dropEvts);
            }
    
            // fire dragout events.
            // These are fires on mouseup/pointerup/touchend
            // in addition to the dropEvt, so must happen *after* the drop
            if (outEvts.length) {
                dragCurrent.b4DragOut(e, outEvts);
                dragCurrent.onDragOut(e, outEvts);
            }
    
            if (enterEvts.length) {
                dragCurrent.onDragEnter(e, enterEvts);
            }
        } else {
            // fire over events
            for (i=0,len=overEvts.length; i<len; ++i) {
                dragCurrent.b4DragOver(e, overEvts[i].id);
                dragCurrent.onDragOver(e, overEvts[i].id);
            }
    
            // fire drop events
            for (i=0, len=dropEvts.length; i<len; ++i) {
                dragCurrent.b4DragDrop(e, dropEvts[i].id);
                dragCurrent.onDragDrop(e, dropEvts[i].id);
            }
    
            // fire dragout events.
            // These are fires on mouseup/pointerup/touchend
            // in addition to the dropEvt, so must happen *after* the drop
            for (i=0, len=outEvts.length; i<len; ++i) {
                dragCurrent.b4DragOut(e, outEvts[i].id);
                dragCurrent.onDragOut(e, outEvts[i].id);
            }
    
            // fire enter events
            for (i=0,len=enterEvts.length; i<len; ++i) {
                // dc.b4DragEnter(e, oDD.id);
                dragCurrent.onDragEnter(e, enterEvts[i].id);
            }
        }
    ...
    }
    And that seems to work ok so far... Does anyone see a problem with this? Is putting the enter events after the drop or over events going to cause any issues?

    Thanks

  4. #4
    Sencha Premium Member rkleinkromhof's Avatar
    Join Date
    Apr 2013
    Location
    Enschede, The Netherlands
    Posts
    53

    Default issue is still present in Ext JS 6.7.0

    I'm still experiencing this issue in Ext JS 6.7.0.

    Check out these Fiddles if you want to see the bug in action:

    - Drop position indicator issue (forked): https://fiddle.sencha.com/#fiddle/2v04&view/editor
    - Drag out not triggered on correct dropzone when moving between dropzones: https://fiddle.sencha.com/#view/editor&fiddle/2v03

    In the last Fiddle i've included a bugfix (commented out) that looks like Jesfery's bugfix.

    In our application, this bug causes some drag operations to wrongfully disallow the drop, because the drop validity is calculated on notifyEnter, returned on notifyOver and cleared on notifyOut. If these three are out of sync, then a valid drop location can become disallowed.

Similar Threads

  1. [4.2.1] Ext.view.DropZone
    By cs0ip in forum Ext:Bugs
    Replies: 2
    Last Post: 30 Aug 2013, 5:42 PM
  2. Each Node in Ext.View should be a dropzone
    By Richie1985 in forum Ext: Q&A
    Replies: 1
    Last Post: 31 May 2012, 10:56 AM
  3. can't create dropZone
    By Dmoney in forum Ext: Discussion
    Replies: 3
    Last Post: 4 Feb 2012, 2:47 AM
  4. Dropzone disappearing when creating a new dropzone
    By obarlier in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Apr 2009, 12:19 AM
  5. TreePanel, DropZone position..
    By hAmpzter in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Oct 2008, 7:40 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •