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 3.0.1
Committed At 2018-08-25 15:19:22 UTC

Modules

    README

    This package allows you to make multiple elements draggable simultaneously.

    You are responsible for setting up handlers for the mousedown event on each element you want to be draggable. For each handler you specify the interaction location using a union type you define. The library handles the subscriptions to the subsequent mousemoved and mouseup events, giving to you an easy to pattern match report of movements, end of drag, and clicks (for when there was no mouse movement).

    How it works

    1. You create a single type to represent every possible interaction location.
    type InteractionLocation
        = GraphNode Int
        | Label Int
    
    1. In your view functions, add an attribute to each element you want to make draggable
    viewGraphNode: Int -> Node -> Html Msg
    viewGraphNode key node =
        div
            [ Drag.onMouseDownWithOptions
                { stopPropogation = False, preventDefault = False }
                (GraphNode key)
            -- ...
            ]
            [ text <| "Graph Node " ++ (String.fromInt key) ]
    
    1. In your update, handle the start, movement, and end of a drag as well as clicks on an interaction location.
        (Drag.Start location currentMousePosition) as dragMsg ->
            { model | dragState = Drag.update dragMsg model.dragState }
    
        (Drag.Moved location currentMousePosition) as dragMsg ->
            let
                (dx, dy) = Drag.delta dragMsg model.dragState
                updatedModel =
                    { model | dragState = Drag.update dragMsg model.dragState }
            in
                case location of
                    GraphNode key ->
                        -- Handle the drag of the node ...
    
                    Label key ->
                        -- Handle the drag of a label ...
    
        (Drag.End location currentMousePosition) as dragMsg ->
            { model | dragState = Drag.update dragMsg model.dragState }
    
        (Drag.Click location currentMousePosition) as dragMsg ->
            { model | dragState = Drag.update dragMsg model.dragState }
        
    
    1. Add this library's subscriptions to your subscriptions.
    subscriptions : Model -> Sub Msg
    subscriptions model =
        Sub.batch
            [ Drag.subscriptions
            --, ... your subscriptions
            ]