norpan / elm-html5-drag-drop Goto Github PK

Firefox won't start a drag unless some data is set. In 2.0.1 this was done.

As of 3.0.0 it isn't any more.

After looking into it, I assume this is because Elm is now blocking adding JS as attributes as a defense against XSS. This is probably worth documenting (presumably an awkward port solution).

If I have a draggable element with a draggable child element, there seems to be no way of stopping the propagation of the ondragstart event on the child, making the parent element being dragged when I actually intended to drag the child element. The child element is a div inside a parent div.

I'm experiencing this with elm-html5-drag-drop 3.0.0 and Elm 0.19 in Chrome. Is there some mechanism for controlling this that I'm looking past?

On mobile, the recommended drag-drop-touch polyfill can't drop an element on a drop zone outside of the original scrolling viewport. This is an open issue on drag-drop-touch. Someone in that issue recommends the mobile-drag-drop polyfill which supports dragging outside the scrolling viewport. However, elm-html5-drag-drop needs some small tweaks for mobile-drag-drop to work, involving call to event.preventDefault() on dragenter.

Platform: Safari on iPad

According to the spec (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetY) offsetX and offsetY are a float.

They are currently parsed as int so events which contain a float offset are ignored because the decoder fails.

Took me quite a while to figure out why the drop and dragover events were missing in some cases :)

Something else I noticed when I was tracking this down is that you should also call preventDefault on the dragenter event (for example IE11 requires this before it will fire the dragover and drop event). The spec (https://developer.mozilla.org/en-US/docs/Web/Events/dragenter) states that it will cancel the current target as a drop target if you do not call preventDefault so it makes sense to call it.

So I have a situation where I would like to use the model type to check which dropzone is hovered. For instance when hovering a draggable element over a dropzone I would like to apply a highlight-style to said element.

One way I thought of to solve this is to check if the model is DraggedOver a specific element, but the DraggedOver type is not exposed in this module!

Could the "module exposing"-line be changed to include "Model(..)"?

This library works great. Thank you for writing it!

I seem to be having some difficultly whereby sometimes I get a DragEnter and DragLeave when hovering over a droppable element (in my case a TR). I haven't been able to put my finger on exactly what is going on, but perhaps these log messages illustrate a bit.

These are the log messages when a drag and drop works properly:

app.js:12691 dragDropMsg: DragStart { bucketId = "Manual-56", startTime = 1487615992883, endTime = 1487615993884 }
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragEnter "Manual-54"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: Drop
app.js:12691 with Result: Just ({ bucketId = "Manual-56", startTime = 1487615992883, endTime = 1487615993884 },"Manual-54")
app.js:12691 drop: ({ bucketId = "Manual-56", startTime = 1487615992883, endTime = 1487615993884 },"Manual-54")
app.js:12691 dragDropMsg: DragEnd
app.js:12691 with Result: Nothing

and this is a somewhat equivalent case of one that doesn't work

app.js:12691 dragDropMsg: DragStart { bucketId = "Manual-29", startTime = 1487615985884, endTime = 1487615991886 }
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragEnter "Manual-43"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragEnter "Manual-43"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragLeave "Manual-43"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragEnter "Manual-43"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragLeave "Manual-43"
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: Drop
app.js:12691 with Result: Nothing
app.js:12691 dragDropMsg: DragEnd
app.js:12691 with Result: Nothing

I think the problem is that I am getting a pre-mature or erroneous DragLeave event. This was an attempt to drop an item on "Manual-43". But, as you can see, it appears that it is getting a DragLeave as soon as it gets the DragEnter (or quickly thereafter).

I'm dragging within a nested TD that is itself nested in an outer table and I'm dropping on an outer table TR. I think this has something to do with the contents of the child elements. The only thing I came up with while researching this is that some people have had issues where DragLeave was being issued because child elements were grabbing the DragEnter event? I honestly don't know if this is a general issue with drag/drop or the implementation here, or some complication with the fact that the DOM is virtual and pieces of the real DOM are generated by Elm.

I have a hierarchy of divs. When I drag an item on a droppable child it oscillates between the parent and the child.

So for example:

If I drag an item over SomeName2 it gives the following console.logs

(dropId, position): (Just "Horizontal Layout",Just { height = 102, width = 211, x = 69, y = 14 })
(dropId, position): (Just "SomeName2 (Dropdown)",Just { height = 44, width = 79, x = 69, y = 14 })
(dropId, position): (Just "Horizontal Layout",Just { height = 102, width = 211, x = 69, y = 14 })
(dropId, position): (Just "SomeName2 (Dropdown)",Just { height = 44, width = 79, x = 69, y = 14 })

I suspect its a similar issue to #11 where the propagation is not stopped.

I noticed a serious delay when using drag drop with a highlight on the droppable items.
It seems the runtime gets flooded with DragOver messages.
In the following video I drag an item and the destination should turn dark grey when I hover over it.
Now it turns grey some time after I have already dropped.

I'm trying to implement a reorderable list and I'm using Position to find if the drop needs to happen above or bellow the drop zone (which is another element of the list). The issue is that offsetX and offsetY read in the event to build Position is the relative position of the mouse to the DOM node the mouse is hovering and not the droppable DOM node.

I slightly modified the example Ellie to show the issue.

When you try to drop the elm logo on the bottom of the red square, the dropzone background is cyan instead of purple. If you move the mouse horizontally, as soon as you exit the red square the background is purple. This is because in the bottom of the red square the offsetY is still smaller than currentTarget.clientHeight / 2 because that offset is relative to the red square and not the dropzone.

Is there a way to ignore child nodes of droppable nodes?

Would you be open to merging a pull request that allowed for the ability to drag/drop something like an external file or photo into a dropzone?

It would also need to be able to be configurable where this behavior needs to be explicitly enabled.

I would be interested in adding this, but only if you find this useful.

Hi, I tried out the Ellie example and could not get it to work.

Dragging the image from the top box into either of the lower boxes lead to the image being opened in the browser.

I am on Firefox 59.

There is an issue with the elm-compiler
elm/compiler#1817

Since my upgrade to the latest version of the package, the following line breaks by app when using --Debug

type Msg = DragDropMsg (DragDrop.Msg Int Int)

Note that it is not related to the Int type but occurs as soon as we use the complex JsonValue type.

I think this is the line that broke it for me:
https://github.com/norpan/elm-html5-drag-drop/blame/master/src/Html5/DragDrop.elm#L113

A quick and known workaround is putting the DragDrap.elm in your src directory and use that one instead of the one from the package

I was using 3.0.2, but had some trouble with the virtual DOM breaking, so I upgraded to 3.1.1. However, with 3.1.1 I get no successful drops at all. I tried downgrading to 3.1.0, where I get successful drops again, but also some issues with the virtual DOM.

I'm using droppables inside droppables, why I was curious about this comment which seems to end prematurely:
https://github.com/norpan/elm-html5-drag-drop/blob/master/src/Html5/DragDrop.elm#L249

I try to use this within a project using elm-css and elm-font-awesome-5.

"rtfeldman/elm-css": "17.0.1",
"frandibar/elm-font-awesome-5": "1.0.0"

Getting the following runtime error (endless loop):

elm.js:2842 Uncaught TypeError: Cannot set property className of #<SVGElement> which has only a getter
    at _VirtualDom_applyFacts (elm.js:2842)
    at _VirtualDom_applyPatch (elm.js:3719)
    at _VirtualDom_applyPatchesHelp (elm.js:3702)
    at _VirtualDom_applyPatches (elm.js:3693)
    at elm.js:4066
    at updateIfNeeded (elm.js:4600)

So it looks like somehow, I ran into this bug/problem. Before I try to find our for myself where this comes from:
Did anyone tested / used this library together with elm-css?

When I compile and run the example with elm 0.18 I have the following effects:

• Dragging the Logo down replaces the whole page with the SVG file.
• Dragging an empty div results in redirect to http://0.0.0.0

It seems in some browsers (Firefox), there is an unintended result of using 'text' as a parameter in setData('text', '').

Specifically, if dragging over a text input in a drop target, the browser will have the cursor in the text input track the mouse. It appears to the person dragging, as though the dragged item can be placed within the text wherever the text cursor is moved to.

A fix is to use some other value like event.dataTransfer.setData('myapp/custom', '');

I'm trying to change the mouse cursor while user is dragging an object on various drop targets. The idea is to signal the user if she can or can't drop an object on a certain target.

Indeed changing a mouse cursor needs to be done in JS via a port with a call to dropEffect (see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect):

Within event handlers for dragenter and dragover events, dropEffect should be modified if a different action is desired than the action that the user is requesting.

So I'm wondering how I can access the dragover event. It seems I'm missing something very similar to getDragstartEvent, only for such event. Am I missing something obvious here? Thanks!