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下面的区域位于可排序列表之外。