jQuery UI可排序-无法将元素拖到连接的列表/列的底部 [英] jQuery UI sortable - unable to drag elements to the bottom of a connected list/column

问题描述

我在jQuery可排序项方面遇到问题.我正在使用它通过创建3列来开发类似iGoogle的信息中心.所有3个都包含可排序的div，并使用connectWith选项相互连接.

I'm having an issue with jQuery sortables. I'm using it to develop an iGoogle-like dashboard by creating 3 columns. All 3 contain sortable divs and are connected to each other using the connectWith option.

我遇到的问题是尝试在可排序列的底部放置div时；它只是不想发生.仅当我将其拖动/粘贴到要拖动到的列表中最底部的div上时，该选项才起作用.

The issue I'm having is when trying to drop a div at the bottom of a sortable column; it just doesn't want to happen. It only works if I drag it over/past the bottom-most div that's already in the list I'm dragging to.

有什么办法可以避免这种情况?还是要在每个列的底部固定一个虚拟div?在这方面的任何帮助将不胜感激！

Is there any way to avoid this? Or maybe to create a dummy div fixed at the bottom of each column? ANY help on this would be MUCH appreciated!

谢谢.

推荐答案

旧问题，但也许可以帮助其他人...

Old question but maybe to help others...

填充有效，但会改变视觉效果.

Padding works but changes your visual treatment.

另一种解决方案是使用可排序api提供的公差".公差值指针"表示只要用户将光标放在其他元素之一上，该项目就可以替换其位置(而不是在元素上留出一定的空间，这就是您无法填充的原因)

Another solution is to use 'tolerance' provided by the sortable api. A tolerance value of 'pointer' means that as long as the users cursor is over one of the other elements the item can replace its position (instead of being a certain amount of space over the element which is the reason you have trouble without padding).

尝试将其添加到初始化中(在我的示例中，我是对列表进行垂直排序).

Try adding this to your initialization (in my example I am sorting a list vertically).

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

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

It should be very snappy after you do that.

此外，您还可以在此处查看有关jQuery文档的信息: http://api.jqueryui.com/sortable/#选项公差

Also you can see the jquery doc on it here: http://api.jqueryui.com/sortable/#option-tolerance

这篇关于jQuery UI可排序-无法将元素拖到连接的列表/列的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！