This library allows you to build great UI with drag-and-drop simple. It is abstracting you from mouse events and other low-level staff. You can operate high-level things such as draggable and droppable areas.
The idea of package API is you should be able to wrap elements with draggable dragMeta
to add an ability to drag it.
The dragged object will get some meta information via dragMeta
argument.
Also, you could wrap another element with droppable dropMeta
,
so if you drop element over that element, the message YourOnDropMessage dropMeta dragMeta
will be fired.
You can find simple examples here. For more complex example check Chess Board.
{ model : Draggable dropMeta dragMeta
, subscriptions : Draggable dropMeta dragMeta -> Platform.Sub.Sub m
, draggable : dragMeta -> List (Html.Attribute m) -> List (Html m) -> Html m
, droppable : dropMeta -> List (Html.Attribute m) -> List (Html m) -> Html m
}
The type of init function result.
See init
for more information.
Type of Draggable object. It is parametrized by types of dragMeta and dropMeta. You should place it inside your Model.
type alias Model =
{ draggable : DnD.Draggable Int Int
, count : Int
}
init : (Msg dropMeta dragMeta -> m) -> (dropMeta -> dragMeta -> m) -> DraggableInit dropMeta dragMeta m
Initialize Draggable state and function This helper returns initModel, subscription, draggable and droppable functions for your message wrapper.
type Msg
= NoOp
..
| Dropped Int Int
| DnDMsg (DnD.Msg Int Int)
dnd = DnD.init DnDMsg Dropped
type alias Model =
{ ...
, draggable = dnd.model
}
Subscriptions alow you to get drop event.
subscriptions : Model -> Sub Msg
subscriptions model =
dnd.subscriptions model.draggable
View wrapper for draggable object, you could drag object wrapped by this helper
draggable :
List (Html.Attribute Msg)
-> List (Html Msg)
-> Html Msg
draggable =
dnd.draggable dragMeta
View helper for the droppable area, you could drop object to this area,
after that, your Dropped meta
message will be sended.
droppable :
List (Html.Attribute Msg)
-> List (Html Msg)
-> Html Msg
droppable =
dnd.droppable dropMeta
getDropMeta : Draggable dropMeta dragMeta -> Maybe dropMeta
Helper that return you a dropMeta that will be used if an object will be dropped at the current area. It is useful to check is it area allow you to drop an object and highlight it for example.
dnd.droppable meta
[style
"background-color"
case DnD.getDropMeta model.draggable of
Just _ ->
"cyan"
_ ->
"white"
]
[]
getDragMeta : Draggable dropMeta dragMeta -> Maybe dragMeta
Helper that allow you to get meta information from a current draggable object. You can use it to remove draggable object from the list
elements =
model.elements
|> List.filter
(\e ->
model.draggable
|> getDragMeta
|> Maybe.map (\meta -> meta.id /= e.id)
)
Inner messages, you should pass them to DnD.update at your update function.
type Msg
= Dropped Int
| DnDMsg (DnD.Msg Int Int)
update : Msg dropMeta dragMeta -> Draggable dropMeta dragMeta -> Draggable dropMeta dragMeta
Update function handle all low-level staff
update : Msg -> Model -> Model
update msg model =
case msg of
Dropped item ->
{ model | count = item + 1 }
DnDMsg msg ->
{ model
| draggable =
DnD.update msg model.draggable
}
dragged : Draggable dropMeta dragMeta -> (dragMeta -> Html m) -> Html m
View helper for a draggable object, it draws HTML of dragged object under your mouse in process of drag.
box : Int -> Html Msg
dragged item =
p [] [ text item.text]
DnD.dragged
model.draggable
box