[elm-discuss] 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' via Elm Discuss]

Post by 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.

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?

[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

Post by 'Rupert Smith' via Elm Discuss
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)

Post by 'Rupert Smith' via Elm Discuss

Post by 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.

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' via Elm Discuss]

Post by Jan Hrček
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
, "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

Post by 'Rupert Smith' via Elm Discuss

Post by Jan Hrček
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
, "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.