为什么可拖动的对象有缓慢的占位符？

Question

我并没有问题，但有时候我注意到可拖拽对象的占位符会变得很慢。

我做了这个测试：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");
            }
        });
    });

在可拖动对象中添加列表的对象很容易，没有问题，但是当我尝试移动可拖动对象中的元素时，有时红色占位符移动速度较慢。我的意思是有时在水平移动元素时，占位符需要更长的时间才能移动（更新其位置）。我必须在新位置周围移动鼠标才能更新占位符的位置。我希望它更加灵敏，这可能吗？请看下面的图片。正如你所看到的，我正在将一个元素从第四个位置移动到第一和第二个位置之间。正如你所看到的，占位符离那里很远。我正在使用Chromium 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2)。

- Dail

---

浏览器和版本可能是考虑这个问题的特别相关细节？在Chrome 31.0中对我来说运行良好。 - Thomas W

你说得对，“Sortable”中重新排序块很笨拙。如果块从一开始就构建到列表中，而不是被拖到那里，它是否像这样笨拙？jQueryUI示例似乎不像这样笨拙。 - Thomas W

@thenewseattle--如果你把'My List'里的块拖到'My Sortable'中，然后再试着在'My Sortable'中重新排序，感觉会很笨重。这就是OP所问的症状。 - Thomas W

@ThomasW 你是对的！如果块被构建到列表中，占位符就可以完美地工作！请参见：http://jsfiddle.net/X3Vmc/2/ - Dail

@ThomasW 没错，这就是我所做的。在Chrome中运行得很好！ - thenewseattle

Answer 1

你是对的，如果在Sortable对象内添加一个空的<li></li>，问题就会解决。

我认为这是一个可行的解决方案，无论出于什么原因，Sortable对象初始化时只需要有一个可以排序的项。我相信答案的核心在于：当Sortable初始化时，它需要知道将要排序的元素类型，以使占位符正常工作。因此，在你将要排序li元素时，应该使用至少一个li元素在Sortable对象中初始化它。

我之所以这样认为，是因为我曾试图用空的<div>来替换空的<li>，但那并没有解决问题。

你提出的解决方案目前只有两个小问题。拖动可拖动元素时，还是会考虑到空的<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

- Trevor

---

谢谢您的好解释。我会遵循您的建议。谢谢。 - Dail

Answer 2

我假设“可拖动”处理程序仍然附加，并且与/导致“可排序”处理程序发生冲突。这导致缺乏响应性。

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

- Thomas W

---

但很奇怪，因为你可以看到我正在使用“clone”作为助手，它应该创建一个新的元素，不是吗？ - Dail

Thomas，我注意到如果在Sortable对象内添加一个空的<li></li>，就不会出现错误！嗯，这可能是一个解决办法吗？ - Dail

Answer 3

在我的情况下，问题出现在可排序的Flexbox容器上。

无论可排序项是否填充，无论是<div>、<li>还是<something-else>都没有关系。

例如：http://jsfiddle.net/X3Vmc/27/。

---

jQuery UI问题跟踪器

事实证明，jQuery UI论坛上已经有关于在可排序元素中使用flexbox的已打开错误报告： https://bugs.jqueryui.com/search?q=flexbox

不幸的是，我无法创建一个新的错误报告 https://bugs.jqueryui.com/newticket :(

嘿，jQuery UI团队的任何人，如果你们看到这个，请解释一下为什么你们还在使用那个丑陋的90年代论坛而不是GitHub Issues？

这个问题非常恼人，因为我们的页面上到处都是flexbox元素

---

解决方法

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

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

除非jQuery UI团队解决了问题，或者有人贡献并提交了Pull Request，否则永远不要将可拖动元素与可排序元素连接起来。

即使您只有一个可拖动元素，请使用div将其包装起来，将其初始化为可排序元素，并将该div连接到其他可排序元素。它将表现为可拖动元素，并且可以正常工作。

---

有缺陷的jQuery UI Sortable

不幸的是，在可排序元素之间拖动几次后，出现了一个新问题，请参见图片。

所以我必须重新表达我的解决方法：不要在Flexbox容器中使用jQuery UI Sortable。好吧，有一个临时的解决方法，只需将这个可怕的东西添加到sortable的选项中：

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

换句话说，清理掉它留下的垃圾。

例如：http://jsfiddle.net/X3Vmc/29/ 说真的，是时候考虑寻找替代库，而不是使用那些过时的破玩意了。

- Steven Pribilinskiy