Package for Drag and Drop for sortable lists with mouse events

Show and Tell
1

Demos, examples and further links are here: annaghi.github.io/dnd-list

  • it does NOT use the native HTML5 Drag and Drop API
  • it relies on the mouse events from the Browser.Events
  • it does NOT handle pointer nor touch events
  • it allows you to style the dragged and the droppable zone elements in your view functions
  • it reorders the list when necessary

This package was inspired by

  • ir4y/elm-dnd
  • zwilias/elm-reorderable
  • Dart Drag and Drop
14 Likes
2

Kudos on a very polished library for this kind of thing, I think this plugs a gap.
One point to note, because it does not handle touch events, it doesn’t work on mobile. I had a use of such an interface a few months ago and basically ended up with a much less polished version of what you have. I saw that it didn’t work on mobile and had up/down arrow buttons on the left and right of each entry for that use case. However, it turned out all of my users were using it on mobile. So I replaced the dragging interface with a touch-to-select-then-then-touch-to-move interface.

3

Thank you for the kudos :grinning: I have a lot fun working with Elm.

Also, sorry for the late reply, but I am a little bit confused about your comment. I am aware of the consequences of not handling touch events, and the package will support them as soon as possible. Is this what you meant?

4

I meant it more to people considering to use this package. The point is, it won’t work on mobile devices, so if what you’re developing has to work on such devices then you’ll need to think of some other solution.

5

Aha, yes, thank you. I thought I was clear in my original announcement, but more warnings are better.

6

I tried to use DnDList together with elm-ui. see https://ellie-app.com/4KtR4kmsntza1
It almost works, but the dragged position of the dragged element should be somehow relative to its parent.

7

It works when the draggedItemView is inFront of the layout.
see again https://ellie-app.com/4KtR4kmsntza1
Thank you for this great, simply-to-use package.

1 Like
8

You’re welcome!

I can see the Ellie example. I am not an elm-ui expert, it will take me some time to find out where should I put the inFront.

Are you interested in creating a Pull Request into the examples folder on GitHub? I would like to add your code to the examples.

Thank you for trying out the package with elm-ui!

9

Here is the correct link for the fixed example:
https://ellie-app.com/4KMHGHhksQpa1

1 Like
10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.