Issue 264: Dynatree intermittently stops calling onDrop callback
Status:  Done
Owner: ----
Closed:  Jan 2012
Project Member Reported by wbgil...@gmail.com, Dec 30, 2011
What steps will reproduce the problem?

1. Drag a folder node to another control.  (In my case, it's a <ul> and this indicates to remove all nodes beneath the folder node just dropped on the <ul>.  After dropping the folder node on the ul, it remains in the dynatree, but all of its children nodes are removed).

2. Drag a <li> in the <ul> to the dynatree and drop it on any folder in the dynatree.  

3. The onDrop callback in dnd options is never called. 
 
4. Drop the dragging item from #2 somewhere (i.e. get rid of it) then click on a folder in the dynatree.  

5. NOW, when you drop a <li> on a folder node onDrop is called.  



If possible, please attach an example HTML file (e.g. a copy of `doc/_test-
ISSUE.html`), that reproduces the problem when copied
into the dynatree/doc/ folder or - even better - reproduce on jsFiddle:
This is difficult, as I have dynatree wired up to my server with custom data/Ajax and such.  However, dynatree-specific debugging does reveal the following:

1. In steps #2-3 above, the folder node has the following classes:

<li class="dynatree-lastsib">
    <span class="dynatree-node dynatree-folder dynatree-expanded dynatree-lastsib dynatree-selected dynatree-active ui-droppable business-unit dynatree-exp-el dynatree-ico-ef">
        <span class="dynatree-connector"></span>
            <img alt="" src="http://localhost:53575/Scripts/skin/Folder.ico
                <a class="dynatree-title" href="#">Clinology</a>
    </span>
    <ul style=""></ul>
</li>


2. In step #4 above, I click on the above node and the dynatree-focused class is added to the node.  NOW, onDrop is called by dynatree.

3. There's more to it than the dynatree-focused class, because I can drop on folders without dynatree-focus.   Rather it *appears* to be something associated with the dynatree losing focus and resetting something internally when I click on the dynatree (step #4).

The bottom-line: dynatree is not calling onDrop even though ui-droppable is on every node in the dynatree - whether dynatree has focus or not.  (Perhaps losing drop event binding intermittently???)




What is the expected output? What do you see instead?
A dynatree onDrop should always be called, not intermittently stop calling it for whatever reason.


What version of the dynatree and jQuery are you using?
r570.
jQuery 1.7.1
jQuery-ui 1.8.11



On what operating system and browser?
Windows 7 Pro, FireFox 8.0 (and I see it with Chrome 12 and IE9).



What DOCTYPE declaration are you using?
<!DOCTYPE html>



Please provide any additional information below.
If this helps, here's my dynatree declaration:

    function loadOUHosts() {
        $("#tvwOU").dynatree({
            debugLevel: 2,
            autoFocus: false,
            ajaxDefaults: {
                type: 'POST',
                cache: false,
                dataType: "json"
            },
            initAjax: {
                url: "/Configuration/GetOUs",
                data: { ctx: $('input[id="ctx"]').val(), "pid": '' }
            },
            onActivate: function (node) {
            },
            onLazyRead: function (node) {
                node.appendAjax({ url: "/Configuration/GetOUHosts",
                    data: { ctx: $('input[id="ctx"]').val(), "pid": node.data.key
                    }
                });
            },
            onCreate: function (node, span) {
                if (node.data.isFolder) {
                    bindOUContextMenu(span);
                }
            },
            onDeactivate: function (node) {
            },
            onClick: function (node, event) {
                var et = node.getEventTargetType(event);
                if ((et == 'icon') || (et == 'title')) {
                    if (event.altKey) {
                        var pn = node.getPrevSibling();
                        while (pn) {
                            if (pn.isSelected()) {
                                break;
                            }
                            pn.select(true);
                            pn = pn.getPrevSibling();
                        }
                    }
                    else if (!event.ctrlKey) {
                        var snn = node.tree.getSelectedNodes();
                        $(snn).each(function (i, n) {
                            n.select(false);
                        });
                    }
                    if (!node.isSelected()) {
                        $('#umsg').text('Node was not selected');
                    }
                    node.toggleSelect();
                }
                event.stopPropagation();
                return (true);
            },
            onSelect: function (select, node) {
                ////                // Display list of selected nodes
                ////                var selNodes = node.tree.getSelectedNodes();
                ////                // convert to title/key array
                ////                var selKeys = $.map(selNodes, function (node) {
                ////                    return "[" + node.data.key + "]: '" + node.data.title + "'";
                ////                });
                ////                $("#umsg").text(selKeys.join(", "));
            },
            preventVoidMoves: true,
            activeVisible: true,
            dnd: {
                onDragStart: function (node) {
                    $('#dnddragstart').text('onDragStart');
                    if (node.isLoading()) {
                        return (false);
                    }
                    if (node.tree.isUserEvent()) {
                        DisplayUserMessageEx($('#umsg'), 'tvwOU userEvent');
                    }
                    else {
                        DisplayUserMessageEx($('#umsg'), 'NOT tvwOU userEvent');
                    }
                    draggingNode = node;
                    return true;
                },
                onDragEnter: function (node, sourceNode) {
                    $('#dnddragenter').text('onDragEnter');
                    if (node.data.isFolder) {
                        return ('over');
                    }
                    return (false);
                },
                onDragOver: function (node, sourceNode, hitMode) {
                    $('#dnddragover').text('onDragOver');
                    if (node.isDescendantOf(sourceNode)) {
                        return false;
                    }
                    return (node.data.isFolder);
                },
                onDrop: function (node, sourceNode, hitMode, ui, draggable) {
                    $('#dnddragdrop').text('onDrop');
                    $('#umsg').text('tvwOU onDrop!');
                    var pid = node.data.key;
                    var hid;
                    if (sourceNode) {
                        hid = sourceNode.data.key;
                        moveOUHost(hid, pid, node, sourceNode, hitMode);
                    }
                    else {
                        hid = $('.ui-draggable-dragging').attr('id').substring(7);
                        hids = new Array(hid);
                        $(selectedBUs).each(function () {
                            hids.push($(this).attr('id').substring(7));
                        });

                        assignOUHost(hids, pid);
                        $('body > div[id^="_ouhost"]').remove();
                    }
                    node.sortChildren(null, true);
                    node.expand(true);
                }
            }
        });
        $('.business-unit').draggable({ distance: 5, revert: false, helper: 'clone', zIndex: 999999, appendTo: 'body', connectToDynatree: true, cursorAt: { top: -5, left: -5} });
    }


Dec 30, 2011
Project Member #1 wbgil...@gmail.com
I might add, I have manually tweaked r570 per  issue 262  (set greedy to true).

Dec 30, 2011
Project Member #5 wbgil...@gmail.com
Some more information debugging this: The dynatree drag is not terminated when a folder node is dragged to *another* control and dropped.


Dynatree's _onDragEvent with eventName = "drop" never happens after dropping a folder node on the <ul> - then attempting to drop something from the <ul> on dynatree.  

After dropping the folder node on the <ul>, I try to drag a <li> from the <ul> to the dynatree.  Once I enter a dynatree folder node dragging the <li>, dynatree's _onDragEvent is called with eventName = "enter".  But, letting go of the mouse button never calls dynatree's _onDragEvent with eventName = "drop".

In order to get _onDragEvent with eventName = "drop" to happen, I have to first click on dynatree, THEN drag the <li> to the dynatree and only then will a drop be detected by dynatree.


I have tried to programmatically imitate clicking on the dynatree (after dropping the folder node on the <ul>), using activeKey and selectKey calls, but that still doesn't work.  Currently, the only work-around I have is to manually click the dynatree before attempting a drag from another control into it.  :-(


QUESTION: is there anything in dynatree so I can programmatically trigger the click event of a node?   I can try a jQuery selector .click(), but asking in case there's a better way to do this or something I'm going to miss if I do use this approach.

Reply is much appreciated!!!
Jan 7, 2012
Project Member #6 moo...@wwwendt.de
Your site is pretty complex, and I can't add debug code there (even Dynatree's debugLevel is 0, cause you're using a release build, so I see no output).
So it's hard for me to debug. 

This sample - using a standard draggable - seems to work though:
  http://wwwendt.de/tech/dynatree/doc/sample-dnd3.html

1. open the page
2. drag 'Drag me around' and drop over the right tree.

If you can tweak this sample so that we can reproduce the problem, I could easier try help.

Status: Waiting
Labels: Milestone-Release1.2.1
Jan 7, 2012
Project Member #8 wbgil...@gmail.com
> http://wwwendt.de/tech/dynatree/doc/sample-dnd3.html

For this example to reproduce the problem, a tree has to do both drag and drop.  One tree allows only dragging, the other only dropping.

Also, a tree needs to allow both drag and drop of non-dynatree items.

Debugging will be on in a few minutes.  Sorry about that.
Jan 8, 2012
Project Member #9 moo...@wwwendt.de
I attached a test file.
It's a copy of doc/sample-dnd3.html with onDragStart for the right tree, so the right tree accepts internal and external d'n'd.

If I drag an item from the right tree over the 'Drop something here' and then drag 'drag me around' back over the right tree, it works as I would expect.

Please put it into your doc folder, tweak it to reproduce the bug and send it back to me. 
I need a local test case to help you.

Some ideas: it could have something to do with
* the list control you are using
* the way you handle d'n'd event callbacks on Dynatree
* the way you handle d'n'd events on your control
* layout (your sample is much more complex with tables and nested divs)
* ...

_test-264.html
7.5 KB   View   Download
Jan 8, 2012
Project Member #10 moo...@wwwendt.de
Ad comment #5:
you could do a $(..).click() or .focus() or try `node.focus()` or node.activate()
Jan 9, 2012
Project Member #12 wbgil...@gmail.com
What version of dynatree and jQuery are you using with the _test-264.html attachment above?

With r543, JQuery v1.6.1 and jQuery UI 1.8.7 the right tree does not drag (although dynatree debug show the onDragStart event).
Jan 9, 2012
Project Member #13 moo...@wwwendt.de
I used a slightly newer patch (r579 fixes  issue 268 )
Jan 9, 2012
Project Member #15 wbgil...@gmail.com
> I used a slightly newer patch (r579 fixes   issue 268  )

I'll have to see a public working copy.
The drag won't work with the left-most dynatree; the onDragStart event is called, it returns true, but there is no ui-draggable clone visible nor any drag events registered in the other dynatree when dragging over to it.

I'm using FF8, fwiw the demo using Chrome 12.0.742.112 won't load the .json files per Cross-Origin.  I did not try IE9.

So, I need to get a working copy of this test script first before I can (hopefully :-) create a reproduction of the issue.
Jan 9, 2012
Project Member #17 wbgil...@gmail.com
Well, I found the problem, then found this:

https://code.google.com/p/dynatree/issues/detail?id=174

I switched out my context menu plugin for the one in the above issue and it works. :-)

Jan 9, 2012
Project Member #18 moo...@wwwendt.de
I just noticed that you included LaViskas original menu, and suspected that it might be the reason.

Frankly I don't understand, why most menu are not using live events, thus forcing us to bind every time new nodes are rendered.
I added a patched version to make it work, but I am not really going to support that plugin.

Good to hear you found the bug - just in time i guess :-)

Can I close this issue now?

Jan 9, 2012
Project Member #19 wbgil...@gmail.com
Yes, you can close it.  And, THANK YOU for your help. 

I have to look at the plugin changes to see what you changed to make it work; not sure what was needed to.
Jan 9, 2012
Project Member #20 moo...@wwwendt.de
If I remember correctly, it was about mouse events that this plugin prevented from bubbling or s.th. like this.
Good luck with you release :)
Status: Done
Jan 9, 2012
Project Member #21 wbgil...@gmail.com
Thanks.  I still have the auto scrolling issue, though.
Tried that fix and it still didn't autoscroll.  :-(
So, I'll be on that one next.