Tree: items lost using DnD to reorder a node's children

[AlexG]

​http://dojo-toolkit.33424.n3.nabble.com/dijit-Tree-DND-betweenThreshold-bug-please-help-td3992612.html

When dragging in a Tree item 1 before item 2, item 1 disappears somewhere, the same happens when dragging item 1 after item 2.

[bill]

Please attach a test case using the "attach file" button. It should be as small as possible to still reproduce the problem, almost always a single HTML file that we can load in the browser (i.e. not PHP, JSP, etc.)

Then, give exact instructions on how to reproduce the problem using your attached test file.

The test case is necessary both to confirm that there's a bug, and for us to be able to debug the problem.

Thanks!

[AlexG]

html file

[AlexG]

Attachment (dojo-bug-dijit-Tree-DND.html) added by ticket reporter.

[AlexG]

step 1

[AlexG]

step 2

[AlexG]

step 3

[AlexG]

Attached html file and three images that illustrates bug reproduce. Steps to reproduce:

1. Start drag item 1 before or after item 2 (not over, a successor will be created in this case).
2. Drop item 1.
3. Item 1 disappears.

[bill]

I think this is a user error. You've turned on drop-between capability in the tree by setting

betweenThreshold: 5

but your store.put() method doesn't support the "before" parameter to specify ordering of items.

More detail:

dijit/tree/ObjectStoreModel:pasteItem() works by first removing the item being DnD'd:

var oldParentChildren = [].concat(this.childrenCache[this.getIdentity(oldParentItem)]), // concat to make copy
        index = array.indexOf(oldParentChildren, childItem);
oldParentChildren.splice(index, 1);
this.onChildrenChange(oldParentItem, oldParentChildren);

and then adding it back into the right position, using the "before" parameter:

return this.store.put(childItem, {
        overwrite: true,
        parent: newParentItem,
        before: before
});

dijit/tree/ObjectStoreModel:getChildren() sets up a listener for changes to children, in this case changes to the root child's children:

if(res.observe){
        res.observe(lang.hitch(this, function(obj, removedFrom, insertedInto){
                //console.log("observe on children of ", id, ": ", obj, removedFrom, insertedInto);

                // If removedFrom == insertedInto, this call indicates that the item has changed.
                // Even if removedFrom != insertedInto, the item may have changed.
                this.onChange(obj);

                if(removedFrom != insertedInto){
                        // Indicates an item was added, removed, or re-parented.  The children[] array (returned from
                        // res.then(...)) has already been updated (like a live collection), so just use it.
                        when(res, lang.hitch(this, "onChildrenChange", parentItem));
                }
        }), true);      // true means to notify on item changes
}

Unfortunately removedFrom == insertedInto == the old index of the child, so onChildrenChange() isn't called.

It's unfortunate "parent" and "before" support aren't built in to dojo/store/Memory, and that we don't ship a similar store that supports these features, but anyway if you have a custom store that supports "before" (in addition to "parent") then I think this will work.

[bill]

See #15660 and #15661.