优化js draggable的最佳方法

Question

是否存在使用draggable优化我的html的现有方法？我有div，在这个div中我有近100-1000个元素，它是动态生成的。我注意到，当有超过300个可拖动元素时，代码运行的速度越来越慢。

Answer 1

优化jQuery Draggable

以下是一些可能有用的解决方案。很难知道什么是最好的，因为你没有共享任何代码。

• 来自addClasses选项的文档：http://api.jqueryui.com/draggable/#option-addClasses

    

  <强> addClasses

       

  如果设置为false，则会阻止添加ui-draggable类。   在调用时，这可能是期望的性能优化   数百个元素.draggable()。

• Jquery: optimizing Droppable on MouseOver

    

  我正在使用Jquery的Draggable / Droppable功能来允许   从TreeView拖放到一个简单的HTML表，但我找到了   Droppable的性能随着单元的数量变得非常缓慢   增加了表格。

       

  我环顾四周，人们建议的最常见解决方案是   限制活动可拖动和可放置的数量。现在，限制   draggables足够简单（使用树视图的鼠标悬停   节点以启用拖动）。

• How can I make my jquery draggable / droppable code faster?

    

  这么多掉落目标的出现似乎使得表现如此   慢。如果可能，尝试将表设置为单个放置目标和   根据drop中的位置数据计算目标表单元格   事件

       

  不幸的是，您也将失去应用样式的能力   dragOver和dragOut事件上的单个单元格。

       

  编辑：另一个建议是禁用所有tds上的droppable   鼠标移除tr，启用tds中存在的tds的droppables   特定tr（并在trout鼠标输出时禁用它们）。听起来像个   黑客，但值得一试。

  通过https://stackoverflow.com/a/567537/1085891

• Optimizing jQuery UI drag and drop schedule grid

    

  我尝试绑定到mouseover事件，并且实际上没有初始化   任何droppable（或者你需要进行交互的其他参数）   直到鼠标实际上在元素上方。一世   在高度互动的页面上，性能提高了约400％   走这条路。

       

  如果这没有用，请考虑使用dynaTrace ajax版进行测试   它会显示javascript中慢点的位置。

• 您可以在https://codereview.stackexchange.com/

找到一些帮助

Answer 2

您必须有理由在任何特定时刻拥有100-1000个可拖动项目，但请想一想，用户将无法管理（搜索，查找，管理等）屏幕上的许多项目。为了您和您的用户的理智（即使您在客户端创建了1000个可拖动项目的最佳解决方案（计算机速度，可用内存等），这里涉及到一些事情。如果我是你，我会重新考虑这个解决方案并为用户提供搜索这些元素的能力，并选择将它们添加或移动到您需要的任何地方。这样，您就为用户提供了一个很好的解决方案，我怀疑它们实际上是否可以使用1000个活动任何时候的物品。

同样，你可能有理由说你为什么这样做，但有时候另一种观点不会受到伤害。

只是我的两分钱。