arsduo/elm-ui-drag-drop/2.0.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/arsduo/elm-ui-drag-drop.

What we checked: Rebuilt with git archive from commit 2503aaab261e of https://github.com/arsduo/elm-ui-drag-drop (zip prefix arsduo-elm-ui-drag-drop-3a32d8e/, America/Los_Angeles times, the tag object 3a32d8e7c83d it had before it was re-made, tagger time 2018-10-06 13:46 UTC): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 294a9f79f0d04cf8d61b809b0246560999787f12.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/arsduo/elm-ui-drag-drop/zipball/2.0.0/

Dom.DragDrop

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

Dom.Element nodes can be made draggable and droppable, with the state represented by an opaque object you can store in your model.

Each draggable/droppable element should correspond to some kind of id. This could be an (id for an) item in a list, a tag value from a type representing the various draggable/droppable elements, or whatever you want.

Your application must provide messages for each of the events triggered by this framework. The library provides helper methods to query and update the current state.

State

type State draggableIdType dropTargetIdType

An opaque container for state data.

Querying State

isCurrentDropTarget : State draggableIdType dropTargetIdType -> dropTargetIdType -> Bool

This method will tell you whether a given item is currently being hovered over to allow you to provide a visual hint.

currentlyDraggedObject : State draggableIdType dropTargetIdType -> Maybe draggableIdType

This method will return the currently dragged item (if any). Note that this will return the id (data) that corresponds to the Dom.Element node being dragged, rather than the actual DOM node itself.

dropTargetExists : State draggableIdType dropTargetIdType -> Bool

This method will tell you whether the dragged element (if any) is currently over a drop zone.

initialState : State draggableIdType dropTargetIdType

The initial state on page load, with nothing being dragged or dropped.

Updating State

State draggableIdType dropTargetIdType
-> draggableIdType
-> State draggableIdType dropTargetIdType

When the dragStarted message is received by your app, call this method to update the state with the newly-dragged object.

State draggableIdType dropTargetIdType
-> State draggableIdType dropTargetIdType

When dragging stops because either the dragEnded or dropped message were received or the user has done something else in your application, call this method to update the state appropriately.

State draggableIdType dropTargetIdType
-> dropTargetIdType
-> State draggableIdType dropTargetIdType

When the user drags an element over a potential drop zone and the dropTargetChanged message is received by your app, call this method to update the state with the currently targeted drop zone.

Specifying Messages

type alias Messages msg draggableIdType dropTargetIdType =
{ dragStarted : draggableIdType -> msg
, dropTargetChanged : dropTargetIdType -> msg
, dragEnded : msg
, dropped : draggableIdType -> dropTargetIdType -> msg
}

Messages the Dom.DragDrop framework will send to your application as events occur. It is up to your application to call the appropriate Dom.DragDrop update function and store the result in your model.

We track four messages:

  • dragStarted: when the user starts dragging an element
  • dropTargetChanged: when the dragged element is moved over a droppable element
  • dragEnded: when the user stops dragging outside a drop-receiving element
  • dropped: when the user releases a dragged item onto a drop-receiving element

Let's take a look at what this looks like for a sample set of types and messages:

-- some basic ID that each draggable element has
type Id
    = Id Int




-- we can drop onto an existing element or at the end of the list
type DropTarget
    = OntoElement Id
    | EndOfList


type Msg
    = MoveStarted Id
    | MoveTargetChanged DropTarget
    | MoveCanceled
    | MoveCompleted Id DropTarget


dragDropMessages : Dom.DragDrop.Messages Id DropTarget
dragDropMessages =
    { dragStarted = MoveStarted
    , dropTargetChanged = MoveTargetChanged
    , dragEnded = MoveCanceled
    , dropped = MoveCompleted
    }

Updating the UI

State draggableIdType dropTargetIdType
-> draggableIdType
-> Messages msg draggableIdType dropTargetIdType
-> Element msg
-> Element msg

makeDraggable makes an element draggable. When an element is being dragged, it will gain the "being-dragged" CSS class, with which you can control the display of the moving element.

State draggableIdType dropTargetIdType
-> dropTargetIdType
-> Messages msg draggableIdType dropTargetIdType
-> Element msg
-> Element msg

makeDroppable marks an element as a place that a dragged object can be dropped onto. If the dragged object is currently hovering over the droppable element, it gains the CSS class "drop-target" to allow for appropriate visual indication.