我在页面上垂直有几个UL.它们是使用jQueryUI的sortable()设置的.我的现场例子是：
http://jsfiddle.net/GVqPF/2/
我可以从答案中拖出来使其成为问题的最后一个元素.但是当我从问题拖到答案时,占位符会跳转到问题列表中的第二个项目.那时我可以将它拖到顶部.但我不能直接拖到答案列表中的第一个位置.
Here is a video证明了这个问题.
我有这个问题的原因从上面的列表拖到下面列表的第一个元素？
我已经尝试编辑列表和可排序项目的填充和边距.
谢谢,
丹尼斯
解决方法
这是我对这种奇怪行为的观察和合理解释.
当将一个元素从问题容器移动到答案容器时,占位符最初会将自己添加到答案容器的末尾,然后进一步将光标移动到answer1和answer2之间.理想情况下,这不应该发生,因为占位符应该在answer1之前跳转然后在answer1和answer2.
* PS：*此效果可能在jsfiddle窗口中不可见,但如果您使用给定代码构建一个新的HTML页面,您将看到我在说什么.
进一步调查显示可排序的jquery UI插件中存在错误.
获取jquery.ui.sortable.js的开发人员版本,找到这个短语“var dist = 10000; var itemWithLeastdistance = null”.
这段代码的目的是在光标从一个容器移动到另一个容器时找出最近的元素.
观察变量“cur”(我已经为firebug添加了console.log()命令).此变量的值始终为0.由于cur的值始终为’0′,因此代码认为错误地计算了最后的< li> element作为’itemWithLeastdistance’并错误地跳转到那里.
//When entering a new container,we will find the item with the least distance and append our item near it
var dist = 10000; var itemWithLeastdistance = null; var base = this.positionAbs[this.containers[innermostIndex].floating ? 'left' : 'top'];
for (var j = this.items.length - 1; j >= 0; j--) {
if (!$.ui.contains(this.containers[innermostIndex].element[0],this.items[j].item[0])) continue;
var cur = this.items[j][this.containers[innermostIndex].floating ? 'left' : 'top'];
//my comments
console.log("cur : %s for iteration: %s has base %s",cur,j,base);
if (Math.abs(cur - base) < dist) {
dist = Math.abs(cur - base); itemWithLeastdistance = this.items[j];
//my comments
console.debug(this.items[j]);
}
}
让我知道社区的想法.我们可以向jquery ui团队报告.