Skip to content

Selecting / deselecting large amount of items with MultiDrag plugin, extremely sluggish due to inefficient filtering process.Β #2444

@twilson90

Description

@twilson90

I have a sortable list with hundreds of items. If I select 100 items with shift + click, there is very noticable delay... If I have 1000+ items (for testing purposes) and select all of them, it took 20-40 seconds.

The issue lies here:

for (; i < n; i++) {
if (~multiDragElements.indexOf(children[i])) continue;
// Check if element is draggable
if (!closest(children[i], options.draggable, parentEl, false)) continue;
// Check if element is filtered
const filtered = filter && (typeof filter === 'function' ?
filter.call(sortable, evt, children[i], sortable) :
filter.split(',').some((criteria) => {
return closest(children[i], criteria.trim(), parentEl, false);
}));
if (filtered) continue;

Here's a screenshot from the performance tab in developer tools:
Image

With each iteration through the list it becomes slower. There are more efficient ways of doing this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions