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