8

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

我做了这个测试：http: //jsfiddle.net/X3Vmc/

    $(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");
            }
        });
    });

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

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

编辑：

在此处输入图像描述

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

编辑2：

我正在使用 * Chromium 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2)*

4

3 回答 3

5

如果您在 Sortable 对象中添加一个空对象，则您有权<li></li>解决该问题。

我认为这是一个可行的解决方案，无论出于何种原因，Sortable 对象在初始化可排序对象时只需要一个可排序项目。我相信答案的核心是：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>拖动可拖动对象时仍将占空。你可以看到，draggable 可以左右排序，empty li看起来很有趣。您也可以拖动empty li可能会导致一些混乱。

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

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
});

小提琴

于 2013-11-27T16:39:07.147 回答
1

我假设来自“Draggable”的处理程序仍然附加，并且不同意/导致“Sortable”处理程序笨拙。这导致缺乏响应能力。

在将处理程序放入可排序后摆脱处理程序，或者完全克隆/重新创建 DOM 元素 - 可能通过将其复制innerHtml到新的 DOM 元素或类似的方式。

于 2013-11-25T06:58:09.390 回答
0

在我的例子中，当 sortable 是一个Flexbox容器时，问题就出现了。

sortable 是否填充了项目，无论是 a还是<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 团队解决，或者有人贡献并提出拉取请求，否则永远不要将可拖动对象与可排序对象联系起来。

即使你有一个可拖动的，用 a 包裹它，将其div初始化为可排序并将其连接div到其他可排序。它将表现为可拖动的并且可以正常工作。

Buggy jQuery UI 可排序

不幸的是，在 sortables 中徘徊了几次之后，出现了一个新问题，请参见图片。

带有 Flexbox 容器的 jQuery UI 可排序

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

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

换句话说，清理它之后留下的sh*t

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

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

于 2017-05-03T10:07:20.310 回答