https://github.com/ir4y/elm-dnd

Build great UI with drag-and-drop simple
https://github.com/ir4y/elm-dnd

drag-and-drop elm

Last synced: about 1 month ago
JSON representation

Build great UI with drag-and-drop simple

• Host: GitHub
• URL: https://github.com/ir4y/elm-dnd
• Owner: ir4y
• License: mit
• Created: 2016-11-06T09:17:36.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-04T07:43:12.000Z (over 6 years ago)
• Last Synced: 2024-04-16T03:22:02.994Z (8 months ago)
• Topics: drag-and-drop, elm
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/ir4y/elm-dnd/latest
• Size: 34.2 KB
• Stars: 32
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-dnd

This library allows you to build great UI with drag-and-drop simple.  

It is abstracting you from mouse events and other low-level stuff.  

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 dragging object will get some meta information.  

Also, you could wrap another element with `droppable dropMeta`,  

so if you drop element over that element, the message `YourOnDropMessage dragMeta dropMeta` will be invoked.  

At first, you need to initialize draggable state and function.  

`DnD.init` helper returns initModel, subscription, draggable and droppable functions for your message wrapper and onDrop message.

```elm

type Msg

    = NoOp

    ..

    | OnDrop String Int

    | DnDMsg (DnD.Msg String Int)

type alias Model =

    { ...

    , draggable : DnD.Draggable String Int

    }

dnd = DnD.init DnDMsg OnDrop

model =

    { ...

    , draggable : dnd.model

    }

```

Subscriptions allow you to get drop event.

```elm

subscriptions : Model -> Sub Msg

subscriptions model =

    dnd.subscriptions model.draggable

```

View wrapper for draggable object, you could drag object wrapped by this helper

```elm

draggable

    : (Html.Attribute Msg)

    -> List (Html Msg)

    -> Html Msg

draggable =  dnd.draggable dragMeta

```

View helper for droppable area, you could drop object to this area,

after that your on `OnDrop` message will be invoked.

```elm

droppable

  : (Html.Attribute Msg)

  -> List (Html Msg)

  -> Html Msg

droppable = dnd.droppable dropMeta

```

You can find simple examples [here](https://github.com/ir4y/elm-dnd/tree/master/example/src).  

For more complex example check [Chess Board](https://github.com/ir4y/elm-chess).