This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.0
Committed At 2018-10-06 13:46:04 UTC




    This library makes it easy to implement HTML5 drag-and-drop operations with Elm and @danielnarey's elm-dom framework.


    Each draggable element and element you can drop stuff onto ("drop target") has an identifier. Often, these will be based on the ID of some record, but don't have to be. Here's an example from the, well, example:

    {- Let's say have a list of records. -}
    type Id = Id Int
    {- These records are the only draggable elements, so we can use their IDs as the draggable identifier type. -}
    type DraggableId
        = DraggableId Id
    {- Users can drop onto either a specific element in the list (taking that spot) or move it to the end of the list. -}
    type DropTarget
        = OntoElement Id
        | EndOfList

    If your application had certain hard-coded draggable items, you could imagine draggable type like this:

    type DraggableElementId =
      | ChewToy
    type DropTarget =
      | Dog

    All this data gets wrapped up into an opaque object you can store in your model. You learn about the current state using various helper method:

    model =
      { dragDropState : DragDrop.State DraggableId DropTarget }
    {- Is something currently being dragged? Returns a (Maybe DraggableId). }
    Dom.DragDrop.currentlyDraggedObject model.dragDropState
    {- Is there currently a dragged element atop a drop target? Returns a Bool. -}
    Dom.DragDrop.dropTargetExists model.dragDropState
    {- and so on -}


    Your application must define messages for the four events triggered by this framework. Here are the examples again

    type Msg
        = MoveStarted DraggableId
        | MoveTargetChanged DropTarget
        | MoveCanceled
        | MoveCompleted DraggableId DropTarget
    {- You provide these messages when making an element draggable or droppable -}
    dragDropMessages : Dom.DragDrop.Messages Id DropTarget
    dragDropMessages =
        { dragStarted = MoveStarted
        , dropTargetChanged = MoveTargetChanged
        , dragEnded = MoveCanceled
        , dropped = MoveCompleted

    Required Javascript

    Sadly, a bit of Javascript is required to make dragging and dropping work. Fortunately, you don't need to set up any ports -- just some simple event listeners on the body will take care of the event handling:

    document.body.addEventListener("dragstart", event => {
      if ( && {
        // absurdly, this is needed for Firefox; see
        event.dataTransfer.setData("text/html", "blank");
    document.body.addEventListener("dragover", event => {
      // this is needed in order to make dragging work
      return false;


    Check out the example to see how this works!

    Clone this repo and run yarn example. You can then navigate to http://localhost:8080/example to see Dom.DragDrop in action!



    See a bug? Want to add a feature? Awesome!

    Building the library locally is simple: you use the example to easily test your changes or add your local copy of the package to your Elm app's sources to develop in your own app.

    When filing an issue, please include a good description of what's happening and screenshots (if possible). Code to reproduce the issue would be much appreciated.

    Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms. See for more information.