https://github.com/matheus23/elm-drag-and-drop

Drag and drop with a similar api to html5-drag-and-drop, but implemented within elm.
https://github.com/matheus23/elm-drag-and-drop

Last synced: 15 days ago
JSON representation

Drag and drop with a similar api to html5-drag-and-drop, but implemented within elm.

• Host: GitHub
• URL: https://github.com/matheus23/elm-drag-and-drop
• Owner: matheus23
• Created: 2017-08-05T08:32:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-21T14:37:25.000Z (over 7 years ago)
• Last Synced: 2024-10-18T23:50:03.064Z (2 months ago)
• Language: Elm
• Size: 48.8 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Drag And Drop

I experienced the html5 drag and drop api to be buggy and inconsistend across browsers, but all building blocks to roll a pure-elm version exist: mouseover and mouseleave events, a subscription to mouseup events and voila.

However, I reuse the dragstart event (from the html5 api), so that draggable elements can still receive onclick events.

## Demo

An example can be tested out by cloning the repo locally and running `elm-reactor`:

```sh

$ git clone https://github.com/matheus23/elm-drag-and-drop.git

$ elm-package install

$ elm-reactor

```

Now open a webbrowser and go to `localhost:8000/src/Example.elm`.

## Disclaimer

This package is still under construction and documentation is limited. This may change in the future when the API does not change that much anymore.

## 'Low' level API

Can be found in the module `DragAndDrop`. It is used to implement a higher level API for reorderable lists.

## 'High' level API

Can be found in the module `DragAndDrop.ReorderList` together with `DragAndDrop.Divider`. Can be used to implement a list of things that can be reordered by dragging its elements.