Drag & Drop Example

[nelsonic]

We need to do a "Spike" to investigate and write-up an example of doing Drag-and-Drop in Elm (it will be very useful for the work we are doing next month ... but nice UI/UX learning in any case)

Specifically:

• [ ] What "fall back" or "default" UI should we display for people who don't have JS or browser-native Drag-and-Drop capabilities? i.e. what HTML element(s) and CSS/Tachyons styles should we use for the underlying component? (our objective is still to do "Progressive Enhancement")
• [ ] What are the existing Elm packages/components that facilitate this UI enhancement?
• [ ] Has anyone else written a comprehensive tutorial on doing Drag-and-Drop (that we can link to)?
• [ ] How are other people testing it? (can we write front-end tests that exercise the Drag-and-Drop functionality?)
• [ ] How are other people doing "Browser Capability Detection" for this?
• [ ] Any other considerations? (please feel free to add to this list!)

Please start interacting with this issue by sharing links to other people's work (modules, projects, blog posts etc.) to get the discussion going. Only once we have a better understanding of what is already possible we'll be in a much better position to estimate how long the spike should take to complete. (thanks!)

Remember: this is a discovery, documentation & demo exercise and must include tests. Share links and updates to this issue so if you are unable to "finish" the work, someone else can continue working on it when you have to get back "client work"...

CC: @naazy, @SimonLab, @shouston3, @ivanmauricio, @andrewMacmurray & @gabrielperales (please update this "CC" list with who ever elseyou know is keen on advancing their Elm skills!)

[newswim]

Neat!

Curious about one point, is the idea to make a drag-and-drop file-uploader kind-of-thing? Or, something that's just moving elements around the document, similar to Dragula but for Elm.

Or, you may want both. Extending the first would probably be a matter of having a draggable element listen for when it is within a certain boundary, then firing when the mouse is released. All things that the mouse package will handle, (it even says "Implement drag-and-drop for something" in the Readme.

Here's a few examples which address your second question:

• There is an out-of-date package from the community, all of the examples use the pre-0.17 method of using Signals, see: github.

• The "official" example from elm-lang.org/examples. This one uses the Mouse package and updates an element's position directly by decoding the XY position as left/top css properties.

• a hand-rolled DnD example from a small Elm/Haskell app.

• Using HTML5 "draggable" property, with a tutorial and brief write-up on the pros and cons of this method.

• A few more mentioned in this elm-discuss thread, including Elephant Guide.

🏁 WINNER: The best seems to be Elm-Draggable, with a well-documented API and TESTS.

[iteles]

@newswim Thanks for this! To clarify, our original thinking for this was moving elements around a page as you do in Github for example when you move an issue up and down within a milestone

[ZooeyMiller]

I don't know if it's still relevant, but there is a talk at Elm-Europe today titled "Building Reorderable UI in Elm". The live stream for the conference is here and the schedule is here. The talk is scheduled to start at 10:40am (I assume that is CEST, so 9:40 GMT).

[nelsonic]

@ZooeyMiller thanks for sharing / reminding us! we're at client office today so unable to watch the live stream. expecting them to record it can't wait to watch the "Building Reorderable UI in Elm" talk! ❤️ Hope you have a great day! 👍