This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
style-elements compatible Drag and Drop library similar to html5 drag and drop
version 5.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 5.0.0
Committed At 2017-08-21 14:38:16 UTC
norpan/elm-html5-drag-drop 1.1.0 <= v < 2.0.0 1.1.0
mdgriffith/style-elements 3.3.0 <= v < 4.0.0 3.4.1
matheus23/please-focus-more 1.0.0 <= v < 2.0.0 1.0.0
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/mouse 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
SwiftsNamesake/please-focus 1.1.2 <= v < 2.0.0 1.1.2


Drag And Drop

I experienced the html5 drag and drop api to be buggy and inconsistend across browsers, but all building blocks to roll a pure-elm version exist: mouseover and mouseleave events, a subscription to mouseup events and voila.

However, I reuse the dragstart event (from the html5 api), so that draggable elements can still receive onclick events.


An example can be tested out by cloning the repo locally and running elm-reactor:

$ git clone
$ elm-package install
$ elm-reactor

Now open a webbrowser and go to localhost:8000/src/Example.elm.


This package is still under construction and documentation is limited. This may change in the future when the API does not change that much anymore.

'Low' level API

Can be found in the module DragAndDrop. It is used to implement a higher level API for reorderable lists.

'High' level API

Can be found in the module DragAndDrop.ReorderList together with DragAndDrop.Divider. Can be used to implement a list of things that can be reordered by dragging its elements.