[{"name":"DnDList","comment":" While dragging a list item, the mouse events and the list reordering are handled internally by this module.\n\nFirst you need to create a `System` object which holds the information and functions related to the drag operation.\nUsing this object you can wire up the internal model, subscriptions, and commands into your model, subscriptions and commands respectively.\nAlso you can get access to the drag and drop events as well as the dragged position styles in your `view` functions.\n\nFinally you need to wrap up the internal messages into your message, and pass them along with your sortable list to the internal `DnDList.update` function within your `update` funcion.\nThe update will return back with the reordered list.\n\n\n## System\n\nA `System` represents the information about the drag operation and the drag related functions.\n\n@docs System, create, Config, Movement\n\n\n## System Fields\n\n\n### draggable\n\n@docs Draggable\n\n\n### subscriptions\n\n`subscriptions` is a function to access browser events during the drag.\n\n    subscriptions : Model -> Sub Msg\n    subscriptions model =\n        system.subscriptions model.draggable\n\n\n### commands\n\n`commands` is a function to access the DOM for the dragged element `x`, `y`, `width` and `height` information.\n\nFor a more detailed `update` function see [Update](#update)\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            DnDMsg message ->\n                let\n                    updatedModel = ...\n                in\n                ( updatedModel, system.commands model.draggable )\n\n\n### dragEvents\n\n`dragEvents` is a function which wraps all the events for draggable elements.\n\n    model.items\n        |> List.indexedMap\n            (\\index item ->\n                let\n                    itemId : String\n                    itemId =\n                        \"id-\" ++ item\n                in\n                Html.div\n                    (Html.Attributes.id itemId :: system.dragEvents index itemId)\n                    [ Html.text item ]\n            )\n        |> Html.div []\n\n\n### dropEvents\n\n`dropEvents` is a function which wraps all the events for droppable elements.\n\n    model.items\n        |> List.indexedMap\n            (\\index item ->\n                Html.div\n                    (system.dropEvents index)\n                    [ Html.text item ]\n            )\n        |> Html.div []\n\n\n### draggedStyles\n\n`draggedStyles` is a helper to set the current position of the dragged element.\n\n    Html.div\n        (system.draggedStyles model.draggable)\n        [ Html.text item ]\n\n\n## Update\n\nWhile dragging an item, the mouse events and the list updates are handled internally by this module.\n\n@docs Msg, update\n\n\n## Helper\n\n@docs getDragIndex\n\n","unions":[{"name":"Draggable","comment":" A `Draggable` represents the information about the current drag operation.\nIt should be set in your model and can be initialized through the `System`'s `draggable` field.\n\n    type alias Model =\n        { draggable : DnDList.Draggable\n        , items : List a\n        }\n\n    initialModel : Model\n    initialModel =\n        { draggable = system.draggable\n        , items = [...]\n        }\n\n","args":[],"cases":[]},{"name":"Movement","comment":" Represents the mouse dragging movement.\nDragging can be restricted to vertical or horizontal axis only, or it can be free.\n","args":[],"cases":[["Free",[]],["Horizontal",[]],["Vertical",[]]]},{"name":"Msg","comment":" Internal message type.\n\n    type Msg\n        = DnDMsg DnDList.Msg\n\n","args":[],"cases":[]}],"aliases":[{"name":"Config","comment":" Represents the `System` configuration.\n\n  - `events`: your message wrapper\n\n  - `movement`: the kind of the `Movement`\n\nExample configuration:\n\n    config : DnDList.Config Msg\n    config =\n    { events = DnDMsg\n    , movement = DnDList.Free\n    }\n\n    ...\n\n    type Msg\n        = DnDMsg DnDList.Msg\n\n","args":["m"],"type":"{ events : DnDList.Msg -> m, movement : DnDList.Movement }"},{"name":"System","comment":" A `System` encapsulates a `Draggable` which represents the information about the drag operation,\nas well as the drag related subscriptions, commands, events and styles.\n\nFor the details, see [System Fields](#system-fields)\n\n","args":["m"],"type":"{ draggable : DnDList.Draggable, subscriptions : DnDList.Draggable -> Platform.Sub.Sub m, commands : DnDList.Draggable -> Platform.Cmd.Cmd m, dragEvents : Basics.Int -> String.String -> List.List (Html.Attribute m), dropEvents : Basics.Int -> List.List (Html.Attribute m), draggedStyles : DnDList.Draggable -> List.List (Html.Attribute m) }"}],"values":[{"name":"create","comment":" Creates a `System` parametrized with your configuration.\n\n    system : DnDList.System Msg\n    system =\n        DnDList.create config\n\n","type":"DnDList.Config m -> DnDList.System m"},{"name":"getDragIndex","comment":" Returns the index of the dragged item.\n\n    maybeDragIndex : Maybe Int\n    maybeDragIndex =\n        DnDList.getDragIndex model.draggable\n\n","type":"DnDList.Draggable -> Maybe.Maybe Basics.Int"},{"name":"update","comment":" Internal update function which returns an updated `Draggable` and the reordered list for your model.\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            DnDMsg message ->\n                let\n                    ( draggable, items ) =\n                        DnDList.update message model.draggable model.items\n                in\n                ( { model | draggable = draggable, items = items }\n                , system.commands model.draggable\n                )\n\n","type":"DnDList.Msg -> DnDList.Draggable -> List.List a -> ( DnDList.Draggable, List.List a )"}],"binops":[]}]