jQueryUI拖放排序遇到滚动条时可能无法执行排序的小错误和解决方案

前几天我在用Jquery-UI一次拖放多个选中的元素，在不断改进这个组件的时候遇到了一个关于拖放排序的bug。今天，我将重现图片和代码，顺便告诉你如何解决这个问题。

首先，描述上图中的问题：

让我们从一张普通的图片开始：

如上图所示，我为整个div层设置了固定的高度和滚动条。如上图，当可排序区域(黄色列表区域)可见时，从左向右拖动即可成功触发排序操作。

然后来到一个bug图

上图显示了bug触发图。将滚动条拖到底部(只需确保右侧的可排序黄色区域在div中不可见)。此时，看不到黄色的排序列表。在这种情况下，当您拖放要排序的元素，然后向上拖动到可排序列表区域时，您会发现排序操作没有效果。无法触发排序功能。

经过几次搜索，我终于找到了一个办法。让我们来看看：

猜测是鼠标拖动移动到红色边框区域的排序位置时，不计算与滚动条距离相关的信息。看完上面的方法描述，我试了一下，定义了div的滚动事件机制，并加载了refresh方法，在滚动事件触发时刷新位置信息。定义好方法后，重复以上两种情况，好的，就可以了。

下面给出了演示的代码，在这种情况下，每个人都可以杀死整个bug。

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title jquery UI Sortable-Connect list/title link rel='样式表' href=' js/jquery-UI-1 . 12 . 1 . droppeble/jquery-UI . CSS '/style # sort ble1，# sort ble2 { border 3360 1 px solid # eee；宽度： 142 px；最小高度：20px；列表样式类型：无；margin : 0；padding: 5px 0 0 0向左浮动：margin-right : 10px；} #sortable1 li，# sort able 2 Li { margin : 0 5px 5px 5px；padding: 5pxfont-size : 1.2 em；宽度： 120 px；}/style script src=' http : js/jquery-1 . 11 . 2 . js '/script script src=' http : js/jquery-ui-1 . 12 . 1 . drop able/jquery-ui . js '/script script $(function(){ $(' # sort able 1li ')。可拖动({ containment: '#cc '，cursor: 'default '，cancel: 'span，input '，distance: 10，zIndex: 9，opacity: 0.5，cursorAt: { right: 20，top: 20 }，connectto portable : ' # sort able 2 ' })；$('#ccdiv ')。滚动(函数(e) { $('#sortable2 '))。可排序(“刷新”)；//触发滚动时刷新位置信息//$ ('#可排序2 ')。可排序(“刷新位置”)；//同上，只使用其中一个})；$('#sortable2 ')。可排序({ containment:'#cc '，connectWith:'#sortable1 '，zindex :9 })；} );/script/head dydiv id=' cc ' style=' width :500 px；高度：200 px；border:1px纯红；左边距left:50pxmargin-top :80 px ' div style=' width :100%；高度：100%；溢出-y : auto；position : relative ' ul id=' sort able 1 ' class=' connected portable ' Li class=' ui-state-default ' item 1/Li Li class=' ui-state-default ' item 2/Li Li class=' ui-state-default ' item 3/Li Li class=' ui-state-default ' item 4/Li Li class=' ui-state-default ' item 5/Li class=' ui-state-default ' item 6/Li class=' ui-state-default ' item 7/Li class='遇到同样问题的小伙伴可以试一试~ ~

结尾还有一个类似的问题，但是不能用上面的方法解决。如果有小伙伴遇到以下情况，请告知。我们再来描述一下这个问题：

实际上，在实际使用过程中，当有滚动条时，使用jqueryui的交互事件仍然存在一些问题。试着看看jqueryui的源代码。通过对比发现，当connectToSortable设置为可拖拽时，其拖拽排序方式在记录位置信息时并不准确。应该说缓存的位置信息无法及时更新，一次计算错误后，后续的位置越来越偏移。下图：

你可以看到中间部分。我拖动了一个元素。此时我的鼠标在中间黄色区域，但是被拖动的元素(浅蓝色方框)离鼠标位置很远。这种情况的发生是这样的：拖动左侧的元素后，已经被拖动到中间面板，中间面板有很多小容器，可以容纳被拖动的元素。在这些容器上来回移动鼠标几次后，会出现鼠标位置和元素位置偏移的问题。

这个问题不能通过在滚动条事件中添加刷新方法来解决。目前jqueryui的源代码应该是临时记录的位置信息，没有计算滚动条距离。我想尝试改变jqueryui的源代码。我换了很久，但是没用。

这个问题被抛在了脑后。如果有小伙伴知道这个问题的解决方法，请告知解决方法~ ~ ~