看起来好像拖动忽略了鼠标位置,占位符位置显得有些随机.
示例：http://wilhall.com/tests/apptest.html
使用connectWith连接网格时,修复了上述问题：
示例：http://wilhall.com/tests/apptest_2.html
本能地,我决定把我的代码扔进jsfiddle发布这个问题,但是当我这样做时,在jsfiddle上查看时错误不存在：
小提琴：http://jsfiddle.net/B2ddx/1/
以下是两个可排序网格的配置选项：
$(".modules.app").sortable({
cursor: "move",distance: 1,revert: 100,scroll: true,tolerance: "intersect",opacity: 0.6,connectWith: ".modules.bin",placeholder: "placeholder",forcePlaceholderSize: true
}).disableSelection();
$(".modules.bin").sortable({
cursor: "move",connectWith: ".modules.app",forcePlaceholderSize: true
}).disableSelection();
我更新了我的示例页面,除了jquery和jquery-ui之外不包含任何外部CSS或JS,现在使用相同的jquery& ui版本为jsfiddle,以确保一切都是犹太洁食,但问题仍然存在.
我真的很难过可能导致这种情况的原因,并且在我尝试新的解决方案时会继续发布更新.
更新：
在JSFiddle中,connectTo选项不能正常工作,并且实际上并没有链接列表 – 这就是为什么问题不存在的原因.
而且,当可排序的li元素没有浮动时,问题不存在.
更新：
按照建议,我删除了包含可排序项的元素的任何百分比高度,这解决了问题但创建了另一个：没有任何高度(容器占据0高度),项目无法在两个可排序网格之间拖动.
为了解决这个问题,我尝试将float：left和/或height：500px添加到可排序的容器中,但是存在同样的问题.
这是一个简化的JSFiddle,展示了这个问题：
http://jsfiddle.net/y8xrZ/
如果从.sortable调用中删除connectWith选项,则问题将消失.
请注意,此错误会影响使用connectWith的可排序容器.因此,在该示例中,仅从#app容器中删除connectWith仅针对#app容器修复问题,而不针对#bin容器修复问题.
解决方法
最大的线索当然是设置connectWith选项时的行为.我通过jquery.ui.sortable.js文件搜索,发现问题似乎是在_contactContainers方法中引起的,虽然我无法弄清楚原因.
知道jQuery UI 1.8.24确实有效,我比较了两者中的可排序文件.虽然在_contactContainers方法中两个文件之间似乎存在很多差异,但似乎归结为if-else块的差异.在这种情况下,旧版本有一个条件(否则if(this.currentContainer！= this.containers [innermostIndex]))而新版本没有.
在版本1.9.2中的jquery.ui.sortable.js中的第734行,我们看到一个if-else块,开头如下：
// move the item into the container if it's not there already
if(this.containers.length === 1) {
this.containers[innermostIndex]._trigger("over",event,this._uiHash(this));
this.containers[innermostIndex].containerCache.over = 1;
} else {
....
只需将其更改为：
// move the item into the container if it's not there already
if(this.containers.length === 1) {
this.containers[innermostIndex]._trigger("over",this._uiHash(this));
this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) {
将这个条件添加到else对我来说是个窍门.
