Question

我真的没有问题但是，我注意到Draggable对象有时会占用缓慢的占位符。

    $(function () {         
        $("#myproducts li").draggable({
            /*appendTo: "body",*/
            helper: "clone",
            connectToSortable: "#mylist",
            tolerance: "pointer"
        });
        $("#mylist").sortable({
            placeholder: "sortable-placeholder", 

            over: function () {
                console.log("over");

            },
            out: function () {
                console.log("out");
            }
        });
    });

在draggable中添加列表对象很容易没有问题，但是当我尝试在可拖动对象中移动元素时，我发现红色占位符的移动速度很慢。

我的意思是，有时候水平移动元素，占位符会有更多时间移动（更新其位置）。我必须在新位置移动鼠标以更新占位符的位置。我想让它更具反应性。这可能吗？

修改

enter image description here

看一下图片。如你所见，我正在第一个和第二个位置之间移动一个元素（从第四个位置）。正如您所看到的，占位符远离那里。

编辑2：

我正在使用* Chromium 30.0.1599.114 Ubuntu 13.10（30.0.1599.114-0ubuntu0.13.10.2）*

Answer 1

您的权利，如果您在Sortable对象中添加一个空的<li></li>，它就可以解决问题。

我认为这是一个可行的解决方案，无论出于何种原因，Sortable对象在初始化sort-able时只需要一个可排序项。我相信答案的核心是：The sortable needs to know what kind of elements it is going to be sorting when initialized in order for the placeholder to work properly. Therefore if you are going to be sorting li elements, you should initialize the sorter with at least 1 li element in the Sortable object.

我认为情况就是这样，因为我尝试将空<li>替换为空<div>并且没有解决问题。

您的解决方案目前只有两个小问题。拖动拖动时仍会考虑空<li>。您可以看到，拖动可以排序到empty li的左侧和右侧，这看起来很有趣。您也可以拖动empty li，这可能会造成一些混乱。

但幸运的是，解决这个问题非常简单。 li初始化时只需要在sortable中。我们可以删除它，一切都很好！

HTML - 可以使用li元素进行排序。

<ul id="mylist">            
    <li></li>       
</ul>

的jQuery

$(function () {         
    $("#myproducts li").draggable({
        /*appendTo: "body",*/
        helper: "clone",
        connectToSortable: "#mylist",
        tolerance: "pointer"
    });
    $("#mylist").sortable({
        placeholder: "sortable-placeholder"     

    });
    $("#mylist").empty();  //remove the empty li - only needed for initialization
});

FIDDLE

Answer 2

我认为来自“Draggable”的处理程序仍然是附加的，并且不同意/导致“Sortable”处理程序变为clunk。这导致缺乏响应能力。

在将处理程序放入Sortable后删除处理程序，或者完全克隆/重新创建DOM元素 - 可能通过将innerHtml复制到新的DOM元素或某些内容中。

Answer 3

在我的情况下，当sortable是 Flexbox 容器时出现了问题。

无论是否填充了可排序项，无论是<div>，<li>还是<something-else>，都无关紧要。

示例：http://jsfiddle.net/X3Vmc/27/

jQuery UI问题跟踪器

事实证明，jQuery UI论坛上已经打开了与在sortables中使用flexbox相关的错误报告： https://bugs.jqueryui.com/search?q=flexbox

很遗憾，我无法创建新的https://bugs.jqueryui.com/newticket :(

嘿，来自jQuery UI团队的任何人，如果你读到这个，请解释为什么你仍然使用90年代那个丑陋的论坛而不是GitHub问题？

这个问题非常烦人，因为我们遍布各地的Flexbox项目

解决方法

是的，有一个丑陋，肮脏的解决方法：

http://jsfiddle.net/X3Vmc/28/

除非问题由jQuery UI团队整理或者某人贡献并提出拉取请求，否则永远不要将draggable与sortables连接。

即使你有一个可拖动的，用div包裹它，将其初始化为可排序并将div连接到其他可排序。它会表现得像拖车一样，没有问题。

Buggy jQuery UI Sortable

不幸的是，经过几次拖拽之后，出现了一个新问题，请参阅图片。

所以我必须重申我的解决方法：不要使用带有Flexbox容器的jQuery UI Sortable。好吧，有一个kludge，只是将这个可怕的sh * t添加到可排序的选项中：

stop(event, ui) {
    ui.item.css('display', '')
},

换句话说，清理它后面的sh * t

示例：http://jsfiddle.net/X3Vmc/29/

说真的，是时候考虑搜索替代库而不是使用那些过时的垃圾。

为什么Draggable对象具有缓慢的占位符？

3 个答案:

jQuery UI问题跟踪器

解决方法

Buggy jQuery UI Sortable