jQuery UI可排序 - 无法将元素拖动到连接列表/列的底部

Question

我遇到了jQuery sortables的问题.我正在使用它通过创建3列来开发类似iGoogle的仪表板.所有3都包含可排序的div,并使用connectWith选项相互连接.

我遇到的问题是当尝试在可排序列的底部删除div时; 它只是不想发生.只有当我将它拖过已经在我拖动到的列表中的最底部div时,它才有效.

有什么方法可以避免这种情况吗？或者也许创建一个固定在每列底部的虚拟div？任何有关这方面的帮助将非常感谢!

提前致谢.

Answer 1

老问题但也许可以帮助别人......

填充有效,但会改变您的视觉处理.

另一种解决方案是使用可排序的api提供的"容差".公差值"指针"意味着只要用户光标位于其他元素之一上,该项就可以替换其位置(而不是元素上的一定空间,这是没有填充的问题) .

尝试将此添加到初始化(在我的示例中,我垂直排序列表).

      $(this.$el).sortable({
            axis: 'y',
            cursor: 'move',
            containment: 'parent',
            tolerance: 'pointer' // this is the important bit
        });

这样做之后应该非常活泼.

你也可以在这里看到jquery文档:http://api.jqueryui.com/sortable/#option-tolerance

Answer 2

包含div的列需要一个相当大的填充底部,以将可拖动区域扩展到底部div之外.否则,列紧紧地拥抱div,每个底部div下面的区域位于可排序列表之外.