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

Question

我在 jQuery 可排序方面遇到问题。我使用它通过创建 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