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:
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 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); \ } \ } \ }}} \ \ |
---|