jquery - 优化js可拖动的最佳方法

Question

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

Answer 1

优化 jQuery Draggable

以下是一些可能有帮助的解决方案。由于您尚未共享任何代码，因此很难知道什么是最好的。

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

  addClasses

  If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() on hundreds of elements.

• Jquery: optimizing Droppable on MouseOver

  I'm using the Draggable/Droppable functionality of Jquery to allow drag-and-drop from a TreeView to a simple HTML table, but am finding that Droppable performance gets very sluggish as the number of cells increase in the table.

  I've looked around and the most-common solution people suggest is limiting the number of active draggables and droppables. Now, limiting the draggables was simple enough (use the mouseover of the treeview node to enable dragging).

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

  The presence of so many drop targets seems to make the performance so slow. If possible, try setting the table as a single drop target and calculate the target table cell based on the position data in the drop event.

  Unfortunately, you will also lose the ability to apply styles to individual cells on dragOver and dragOut events.

  Edit: Another suggestion is to disable droppable on all tds and upon mouseover of a tr, enable the droppables of tds present in the specific tr (and disable them back upon mouseout of tr). Sounds like a hack, but worth a try.

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

• Optimizing jQuery UI drag and drop schedule grid

  I'd try to bind to the mouseover event, and don't actually initialize any of the droppable (or other arguments you need for interaction on the elements) until the mouse is actually over the element. I increased performance by about 400% on a highly interactive page by taking this route.

  If that doesn't help, consider testing with dynaTrace ajax edition that shows you where the slow points are in the javascript.

• 您可能会在 https://codereview.stackexchange.com/ 找到一些帮助。