项目作者: annaghi

项目描述 :
Drag and Drop for sortable lists in Elm web apps with mouse support
高级语言: Elm
项目地址: git://github.com/annaghi/dnd-list.git
创建时间: 2019-02-08T18:25:21Z
项目社区:https://github.com/annaghi/dnd-list

开源协议:BSD 3-Clause "New" or "Revised" License

下载


Latest Version Build Status

DnD List

Drag and Drop for sortable lists in Elm web apps with mouse support.

Demos and Sources

Examples

  1. $ npm install -g elm elm-live
  2. $ npm run watch

Basic API

  1. create : DnDList.Config a -> Msg -> DnDList.System a Msg
  1. update: DnDList.Msg -> DnDList.Model -> List a -> ( DnDList.Model, List a )
  2. dragEvents : DragIndex -> DragElementId -> List (Html.Attribute Msg)
  3. dropEvents : DropIndex -> DropElementId -> List (Html.Attribute Msg)
  4. ghostStyles : DnDList.Model -> List (Html.Attribute Msg)
  5. info : DnDList.Model -> Maybe DnDList.Info

Config

  1. pseudocode type alias Config a =
  2. { beforeUpdate : DragIndex -> DropIndex -> List a -> List a
  3. , movement : Free
  4. | Horizontal
  5. | Vertical
  6. , listen : OnDrag
  7. | OnDrop
  8. , operation : InsertAfter
  9. | InsertBefore
  10. | Rotate
  11. | Swap
  12. | Unaltered
  13. }

Info

  1. type alias Info =
  2. { dragIndex : Int
  3. , dropIndex : Int
  4. , dragElementId : String
  5. , dropElementId : String
  6. , dragElement : Browser.Dom.Element
  7. , dropElement : Browser.Dom.Element
  8. , startPosition : { x : Float, y : Float }
  9. , currentPosition : { x : Float, y : Float }
  10. }

Real Projects

  • Risk Register by ProjectBalm is a risk management add-on for Atlassian Jira.
    dnd-list is used in the risk model editor for re-ordering risk levels, and is even used to re-order the rows and columns of the risk matrix.

Credits

This package was inspired by the following shiny gems: