Skip to main content

Search and Top Navigation

#15234 new bug ()

Opened September 04, 2017 11:24AM UTC

Last modified September 04, 2017 04:14PM UTC

Sortable: Modifying the list while sorting in progress

Reported by: teterovic Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

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);
        }
    }
Attachments (0)
Change History (1)

Changed September 04, 2017 04:14PM UTC by rjollos comment:1

description: 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); \ } \ } \ \ \ 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): \ {{{#!js \ $(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); \ } \ } \ }}} \ \