https://github.com/norpan/elm-html5-drag-drop

Dragging and dropping in Elm using the HTML 5 API
https://github.com/norpan/elm-html5-drag-drop

Last synced: 5 months ago
JSON representation

Dragging and dropping in Elm using the HTML 5 API

• Host: GitHub
• URL: https://github.com/norpan/elm-html5-drag-drop
• Owner: norpan
• License: bsd-3-clause
• Created: 2017-02-19T16:53:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-02T22:30:01.000Z (over 1 year ago)
• Last Synced: 2024-06-19T04:23:23.095Z (11 months ago)
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/norpan/elm-html5-drag-drop/latest
• Size: 31.3 KB
• Stars: 60
• Watchers: 6
• Forks: 17
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML 5 Drag and Drop API

This library handles dragging and dropping using the API

from the HTML 5 recommendation at

https://www.w3.org/TR/html/editing.html#drag-and-drop.

It provides view attributes to make elements draggable and

droppable and a model/update to keep track of what is being

dragged and the drop target and position within it.

See the [`Html5.DragDrop`](Html5-DragDrop) module for more details.

## Basic usage

```elm

type alias Model =

    { ...

    , dragDrop : Html5.DragDrop.Model DragId DropId

    }

type Msg

    = ...

    | DragDropMsg (Html5.DragDrop.Msg DragId DropId)

update msg model =

    case msg of

        ...

        DragDropMsg msg_ ->

            let

                ( model_, result ) =

                    Html5.DragDrop.update msg_ model.dragDrop

            in

                { model

                    | dragDrop = model_

                    , ...use result if available...

                }

view =

   ...

   div (... ++ Html5.DragDrop.draggable DragDropMsg dragId) [...]

   ...

   div (... ++ Html5.DragDrop.droppable DragDropMsg dropId) [...]

```

## Ellie Example:

You can try out the sample code right here: https://ellie-app.com/7TTxFRNPDGJa1

## Example

https://github.com/norpan/elm-html5-drag-drop/blob/master/example/Example.elm