Drag and Drop from tree to other container not working in Firefox any more

[BjrnS]

Hi,

since a few Firefox versions it is not possible to drag a node out of a tree onto another dojo/dnd/Source element to drop it there. The drop allowed indicator does not appear, releasing the mouse button over the element acts as if the mouse is over any other non-dnd element.
Dnd within the tree works, so it seems like it is not a general problem.
With Chrome and Edge the mechanism works as intended.

Observations:

• I think the Firefox version that first had this problem was the version that introduced their implementation of the pointer api
• it seems like none of the mouseOver / mouseEnter events are triggered for the target container. I tried to identify which of the e.stopPropagation(); e.preventDefault(); in dojo/dnd and dijit/tree might be responsible, but had no luck with that approach

the issue was reported here: https://discourse.dojo.io/t/drag-and-drop-not-working-with-firefox-dojo-1-13/201 as well.

I have hacked together a single page example of the issue, you can reach it here: https://misc.digicult-verbund.de/tests/ff_tree.html

[dylans]

Thanks @BjrnS for the test case, we'll look into this as soon as possible.

[BjrnS]

may I ask if you still plan to look into it and ideally if a fix will be coming?

[edhager]

Hi @BjrnS, I am looking at it now.

So far, it looks like basic Dojo Dnd is working in Firefox:

<div>Pick here:</div>
<ol class="box" data-dojo-type="dojo/dnd/Source">
    <li class="dojoDndItem">Item 1</li>
    <li class="dojoDndItem">Item 2</li>
    <li class="dojoDndItem">Item 3</li>
</ol>
<div>Drop here:</div>
<ol class="box" data-dojo-type="dojo/dnd/Target">
</ol>

I'll dive into the test case and see if I can figure out what's broken.

[edhager]

Here is what I know... In Firefox, when you click on an item and start dragging, this event handler fires for ALL mouse movements even when the point moves outside of the container node:

dijit/tree/_dndSelector.js

Line 47 in 4178582

on(this.tree.domNode, touch.move, lang.hitch(this,"onMouseMove")),

In Chrome, that event handler stops firing as soon as the mouse leaves the tree container node. So in Firefox, the Dojo/Dijit code receives no other events as you drag an item in the tree to another container. Drag and drop works within the tree because that event handler handles movement within the tree.

I've tried to replicate this problem with a simpler test case without success. My thought was if this is a Firefox bug, I would need a much simpler test case to demonstrate it.

[ChangdongLi]

the root cause may be related to a known bug in dojo/touch, see https://dojotoolkit.org/reference-guide/1.10/dojo/touch.html
"If a device has both mouse and touch (like Blackberry phones or some high end desktop computers), dojo/touch will only monitor touch events; ideally it should be monitoring both"

if I disable the touch screen, drag and drop works for me in firefox and chrome.

[msssk]

This can be fixed with some CSS:

.dijitTree {
    -moz-user-select: none;
}

We are working on fixing this in Dijit.