jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用jQueryUI Sortable从连接的垂直列表拖动到下面另一个列表的第一项?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在页面上垂直有几个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团队报告.

大佬总结

以上是大佬教程为你收集整理的如何使用jQueryUI Sortable从连接的垂直列表拖动到下面另一个列表的第一项?全部内容,希望文章能够帮你解决如何使用jQueryUI Sortable从连接的垂直列表拖动到下面另一个列表的第一项?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。