Small bugs and solutions that may not be able to execute sorting in the scroll bar during jQueryUI drag-and-drop sorting,

Small bugs and solutions that may not be able to execute sorting in the scroll bar during jQueryUI drag-and-drop sorting,

A few days ago, I was not using Jquery-UI to drag and drop multiple selected elements at a time. When I continued to improve this component, I encountered a bug about drag and drop sorting. Today we will reproduce the image and code, and tell you how to solve this problem.

First, describe the problem:

Let's take a normal picture first:

For example, I set a fixed height and a scroll bar for the entire div layer. As shown above, when the sorting area (yellow list area) is visible, you can successfully trigger the sorting operation when dragging from left to right.

Next, let's look at a bug chart.

To trigger a bug description chart, drag the scroll bar to the bottom (ensure that the yellow area on the right is invisible to the div). At this time, the yellow sorting list is invisible. In this case, when you drag the elements to be sorted and move them up to the sortedlist area, you will find that the sorting operation has no effect. The sorting function cannot be triggered.

After several queries, we finally found a method. Let's take a look:

The guess is that when the mouse moves to the sorting position in the red border area, the distance related to the scroll bar is not calculated. After seeing the preceding method description, I tried to define the div rolling event mechanism. When a rolling event is triggered, the refresh method is loaded to refresh the location information. After the method is defined, repeat the above two cases, okay.

The demo code is provided below. In this case, you can kill the entire bug.

<! Doctype html> 
The above is a problem encountered during the jqueryui usage. If you encounter the same problem, try it ~~
There is still a similar problem left over at the end, but it cannot be solved using the above method. If you have any friends who encounter this problem, please let us know. The problem is also described here:
In fact, in actual use, there are still some problems concerning the Interaction Events of using jqueryui when a scroll bar is available. I also tried to look at the jqueryui source code and compare it. I found that when I set connectToSortable in draggable, its drag-and-drop sorting method recorded location information is not accurate, it should be said that the cache location information cannot be updated in a timely manner. After a calculation error occurs, the subsequent location will become increasingly offset. For example:

As you can see in the middle part, I drag an element. At this time, my mouse is in the yellow area in the middle, but the drag element (light blue box) is far away from the mouse position. This is the case. After dragging the elements on the left side, the elements are always dragged in the middle panel. There are many small containers in the middle panel, which can hold the drag-and-drop elements. After moving the mouse several times on these containers, the mouse position and element position offset may occur.
This problem is not solved by adding the refresh Method to the scroll bar event. Currently, the source code of jqueryui should be the location information of the temporary record, and the scroll bar distance is not calculated. I want to try to change the jqueryui source code for half a day, but it has not been very effective.
The problem persists. If you have any friends who know the solution to this problem, please inform us of the solution ~~~