CODEWITHSUNDEEP
jquerydraggable
Arthur Yakovlev
Arthur Yakovlev

Reputation: 9309

best way to optimize js draggable

Is there an existing way to optimize my html with draggable? I have got div, in this div I have nearly 100-1000+ elements, it is generated dynamically. I notice, when there are more than 300 draggable elements the code runs runs slower and slower.

Upvotes: 1

Views: 3243

Answers (2)

ProgrammerV5
ProgrammerV5

Reputation: 1962

You must have your reasons to have 100-1000 draggable items at any given moment but think about it the user will not the able to manage (search, find, manage, etc.) that many items on screen. For the sake of sanity to you and your users (there are several things involved here even if you are creating the best solution with a 1000 draggable items on the client side (computer speed, available memory, etc.) If I were you I will re think this solution and provide a user the ability to search those elements and select them to be added or moved to anywhere you need them. That way, you have provided a good solution to the user and I doubt they will actually work with 1000 active items at any given time.

Again, you may have your reasons why you are doing it the way you are doing it but sometimes another point of view doesn't hurt.

Just my two cents.

Upvotes: 1

JSuar
JSuar

Reputation: 21091

Optimizing jQuery Draggable

Here are some possible solutions that might help. Tough to know what would be best since you have not shared any code.

  • From the documentation on the addClasses option: 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.

    via 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.

  • You might find some help at https://codereview.stackexchange.com/

Upvotes: 11

Related Questions