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

我真的没有问题但是,我注意到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"); } }); }); 

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

我的意思是,有时候水平移动元素,占位符会有更多时间移动(更新其位置)。 我必须在新位置移动鼠标以更新占位符的位置。 我想让它更具react native。 这可能吗?

编辑:

在此处输入图像描述

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

编辑2:

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

您的权利,如果您在Sortable对象中添加一个空的

  • ,它就可以解决问题。

    我认为这是一个可行的解决方案,无论出于何种原因,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. 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.

    我相信这是因为我尝试用空的

  • 替换空的

  • 并且没有解决问题。

    您的解决方案目前只有两个小问题。 拖动拖动时仍然会考虑空的

  • 。 你可以看到,draggable可以排序到empty li的左侧和右侧,这看起来很有趣。 你也可以拖动empty li ,这会引起一些混乱。

    但幸运的是,这方面的工作非常简单。 当初始化时, li只需要在sortable中。 我们可以删除它,一切都很好!

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

     

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

    小提琴

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

    在将其放入Sortable之后摆脱处理程序,或者完全克隆/重新创建DOM元素 – 也许是通过将innerHtml复制到新的DOM元素或者某些东西中。

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

    无论是否使用项目填充sortable无关紧要,无论是

  • 还是

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


    jQuery UI问题跟踪器

    事实certificate,jQuery UI论坛上已经打开了与在可排序方面使用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连接起来。

    即使你有一个draggable,用div包装它,将它初始化为可排序并将该div连接到其他sortables。 它将表现得像可拖动并且没有问题。


    Buggy jQuery UI可排序

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

    jQuery UI可以使用Flexbox容器进行排序

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

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

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

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

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