Sortable: Modifying the list while sorting in progress

[Teo Eterovic]

There have been requests to do such a thing before like #9756. I'm trying to use UI-Sortable with JSTree and it works quite well. The only thing that doesn't work as expected is the expanding of subnodes which is normal because it's jstree specific.

So i implemented it with an onhover event that a sublist expands while the user is hovering a collapsed node in the tree.

The problem is such a behaviour makes ui-sortable unstable. I tried to use "refresh" and "refreshPosition" but it didn't help.

see the attached video without the hover expander, it works quite well: ​https://youtu.be/exIUJUYhIKY

after enabling(1) the hover expander code(which modifies the sublist) ui-sortable goes crazy even with "refresh": ​https://www.youtube.com/watch?v=AKjVNpgSsOI

expander code(1):

$(this.EXPANDABLE_NODE_SELECTOR).hover(
            _.debounce(this.addExpandHover.bind(this), this.DEBOUNCE_TIMEOUT));


    private addExpandHover(event: any) {
        if (this.sortingInProgress) {
            let nodeId = event.target.id;
            this.jsTreeHandler.open_node(nodeId, () => {
                $(this.EXPANDABLE_NODE_SELECTOR).off('hover');
                $(this.EXPANDABLE_NODE_SELECTOR).hover(_.debounce(this.addExpandHover.bind(this), this.DEBOUNCE_TIMEOUT));
                this.sortable.sortable('refreshPositions'); // doesnt work
            }, 100);
        }
    }