Opened 2 years ago

#15119 new bug

this.currentContainer points to the wrong container in ui.sortable._mouseDrag().

Reported by: kevinmkr Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description

This is my first bug report so please be kind. I've tried to narrow it down to the best of my abilities and have provided a test case that shows the behavior that results from this bug.

Brief Description:

Let's say you have some ui.draggable items and a ui.sortable drop area for those items. Let's say, also, that one of the items in the ui.sortable drop area is an instance of ui.tabs containing 2 (or more) tabs. Let's, further, say that each tab contains its own ui.sortable drop area. Lastly, the items being dragged should have the ability to be dropped in the main ui.sortable area or any of the tab's drop areas and those dropped items should also be freely draggable between the tab's drop area and the main drop area.

Steps to Recreate:

I've created a fiddle to demonstrate the issue.

1) Drag the green block straight down. Note that you must drag it past the 3rd blue block before the placeholder will appear.

2) Change to "Tab 2". Drag the green block straight down once again. Note that now you only need to drag the green block past the 1st blue block before the placeholder appears.

3) You can also experiment by dragging the blue blocks onto or off of the tabs in order to lengthen/shorten the height on either tab. In all cases, the height of the hidden tab ALWAYS dictates how far down you must drag the green block before being allowed to drop. You could, alternatively, experiment by dragging the green block 2-3 inches to the right before dragging it down. This also avoids the phantom tabs overlay.

Affected Versions:

OS: Windows 7 and Windows 10 tested and found to manifest the issue.

Browsers: IE 11, Firefox 50, Chrome 55 have all been tested and found to manifest the issue.

Discoveries so far:

The issue appears to be, simply, that the main ui.sortable object thinks you're hovering above the hidden tab when you are actually nowhere close to it.

While this underlying issue appears to be present in all versions of jQuery-UI, I've noted that the visual manifestation of the issue (having to drag the green block past the 3rd blue block as described in Steps To Recreate Step 1) began with the addition of the following code in _mouseDrag():

if ( item.instance !== this.currentContainer ) {
        continue;
}

However, that code does not seem to be responsible for the bug. It just makes its existence more prominent. Removing that code will cause the test case to visually function as expected. However, some console logging within _mouseDrag() of this.currentContainer will demonstrate that the hovering green block still thinks it's above the hidden tab while hovering above the first 3 blue blocks.

Further evidence to bolster this assumption is the fact that, if you release a green block over the first blue block, it gets added to the hidden tab.

Change History (0)

Note: See TracTickets for help on using tickets.