[{"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.\n\nUsing this object you can wire up the internal model, subscriptions, commands, and update into your model, subscriptions, commands, and update respectively.\nAlso you can get access to the drag and drop events as well as the dragged position styles in your `view` functions.\n\n\n# System\n\n@docs System, create, Config\n\n\n# Message\n\n@docs Msg\n\n\n# Movement\n\n@docs 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\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            MyMsg message ->\n                let\n                    updatedModel = ...\n                in\n                ( updatedModel\n                , system.commands model.draggable\n                )\n\n\n## update\n\n`update` is a 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            MyMsg message ->\n                let\n                    ( draggable, items ) =\n                        system.update message model.draggable model.items\n                in\n                ( { model | draggable = draggable, items = items }\n                , system.commands model.draggable\n                )\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## draggedIndex\n\n`draggedIndex` is a helper which returns the index of the dragged element.\n\n    maybeDraggedIndex : Maybe Int\n    maybeDraggedIndex =\n        system.draggedIndex model.draggable\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","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 Fruit\n        }\n\n    initialModel : Model\n    initialModel =\n        { draggable = system.draggable\n        , items = data\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. You should wrap it within your message constructor.\n\n    type Msg\n        = MyMsg DnDList.Msg\n\n","args":[],"cases":[]}],"aliases":[{"name":"Config","comment":" Represents the `System` configuration.\n\n  - `message`: your message wrapper\n\n  - `movement`: the kind of the `Movement`. It can be Free, Horizontal, or Vertical.\n\nExample configuration:\n\n    config : DnDList.Config Msg\n    config =\n        { message = MyMsg\n        , movement = DnDList.Free\n        }\n\n","args":["m"],"type":"{ message : DnDList.Msg -> m, movement : DnDList.Movement }"},{"name":"System","comment":" A `System` encapsulates a `Draggable` which represents the information about the drag operation and the drag related functions.\n\nFor the details, see [System Fields](#system-fields)\n\n","args":["m","a"],"type":"{ draggable : DnDList.Draggable, subscriptions : DnDList.Draggable -> Platform.Sub.Sub m, commands : DnDList.Draggable -> Platform.Cmd.Cmd m, update : DnDList.Msg -> DnDList.Draggable -> List.List a -> ( DnDList.Draggable, List.List a ), dragEvents : Basics.Int -> String.String -> List.List (Html.Attribute m), dropEvents : Basics.Int -> List.List (Html.Attribute m), draggedIndex : DnDList.Draggable -> Maybe.Maybe Basics.Int, draggedStyles : DnDList.Draggable -> List.List (Html.Attribute m) }"}],"values":[{"name":"create","comment":" Creates a `System` object according to your configuration.\n\nHaving a list of fruits:\n\n    type alias Fruit =\n        String\n\n    data : List Fruit\n    data =\n        [ \"Apples\", \"Bananas\", \"Cherries\", \"Dates\" ]\n\nThe `System` is a wrapper type around your message and list item types:\n\n    system : DnDList.System Msg Fruit\n    system =\n        DnDList.create config\n\n","type":"DnDList.Config m -> DnDList.System m a"}],"binops":[]}]