Issues with drag & drop (also reproducible in drag example on elm website)

[Jan Hrček]

I've been figthing with the following drag and drop issue: when performing multiple drag & drop operations in rapid succession it sometimes happes that drag is in progress, even though my mouse key is up. In this state moving the mouse moves the dragged element and you have to click again to stop the drag (and the element suddenly jumps somewhere it was before). My expectation would be that no matter how rapidly/sloppy I do the dragging, mouse up would always mean that dragging is not in progress. This issue can be reproduced both in latest chrome (61) and firefox (55).

This issue can be easily reproduced in drag example on elm website: http://elm-lang.org/examples/drag

Just try dragging and dropping in rapid succession. After few tries you'll notice you're dragging the element even though you're not holding the mouse button.

I suspect that this behavior has something to do with text withing the dragged element's inner text being selectable.

When I add the following style attributes to the drag example, I can no longer reproduce the issue no matter how fast/sloppily I click:

          ,  "user-select" => "none"

          , "-moz-user-select" => "none" 

Has anyone noticed this issue with drag& drop before? Do you have some explanation / other workaround to fix it (than making text inside dragged element non-selectable)?

Regards
Jan

[Rupert Smith]

On Friday, September 15, 2017 at 12:27:27 PM UTC+1, Jan Hrček wrote:

I've been figthing with the following drag and drop issue: when performing multiple drag & drop operations in rapid succession it sometimes happes that drag is in progress, even though my mouse key is up.

Also happens in MS Edge.

I suspect the following is happening: Mouse goes down on the drag-able item, but you are also moving the pointer at the same time. Elm gets the mouse down event and begins the drag. Meanwhile you have moved the pointer outside of the drag-able item, and release the button outside of it. As this event is not on the item, it does not reported to Elm as a mouse up event.

I also see a very similar issue in my code, where I have a piece of editable content that I want to highlight when the mouse goes over it to show that it can be clicked and edited. Sometimes it fails to pick up the mouse out event and remains highlighted when it should not. I have not really explored the issue in depth, but I need to, so I am interested in how to solve this.

One question that comes to mind, is this a problem that is exclusive to Elm? Or do all javascript applications potentially suffer from it? Is it just a question of thinking more clearly about where in the DOM structure you need to pick up the mouse up/down or in/out events?

[Rupert Smith]

On Friday, September 15, 2017 at 12:27:27 PM UTC+1, Jan Hrček wrote:

I suspect that this behavior has something to do with text withing the dragged element's inner text being selectable.

When I add the following style attributes to the drag example, I can no longer reproduce the issue no matter how fast/sloppily I click:

          ,  "user-select" => "none"

          , "-moz-user-select" => "none" 

I should have read more carefully. I think things may be working similarly to how I described. The mouse down event occurs not on the text, but then the pointer moved over the text and that somehow results in the mouse up event being lost or interpreted as selecting the text. I will try this in my application and see if I get the error always when the mouse moves over text, and also disabling selection. Good observation. 

[Jan Hrček]

I found an easy and deterministic way to reproduce this issue. In the drag example of the elm website, just Double click the "Drag Me" text. This selects the text. Now when you start drag and drop action by clicking within the selected text and release it. the square will still be in the dragged state as if you didn't release the mouse. I opened a PR to at least fix the example:
https://github.com/elm-lang/elm-lang.org/pull/740

[Leonardo Farroco]

I'm currently working in an application with heavy drag'n drop logic, so this topic caught my attention in the past days.

One question that comes to mind, is this a problem that is exclusive to Elm? Or do all javascript applications potentially suffer from it?

By looking at this issue suspecting on how the browser handles drag events,  I was able to find this answer:

https://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag

Dragging an element that has selectable text is a conflicting behavior (from the browser's point of view), so we need to be explicit at what results we want - in this case, not let the text being selected when the mouse in pressed in the parent.

Following the advice from the SO answer, we are able to use e.preventDefault() with Elm's onWithOptions. In the Drag Example, we just need to replace the onMouseDown function with:

onMouseDown : Attribute Msg

onMouseDown =

  onWithOptions

      "mousedown"

      { stopPropagation = False

      , preventDefault = True }

      (Decode.map DragStart Mouse.position)