All Projects → ir4y → elm-dnd

ir4y / elm-dnd

Licence: MIT license
Build great UI with drag-and-drop simple

Programming Languages

elm
856 projects

Projects that are alternatives of or similar to elm-dnd

React Dragtastic
A simple drag and drop library for React which uses the more stable mouseDown/mouseUp event pattern instead of the problematic HTML5 drag and drop API
Stars: ✭ 181 (+524.14%)
Mutual labels:  drag-and-drop
Vue Transmit
Vue.js drag & drop uploader based on Dropzone.js
Stars: ✭ 209 (+620.69%)
Mutual labels:  drag-and-drop
Base64 Encoder
Base64 Encoder
Stars: ✭ 245 (+744.83%)
Mutual labels:  drag-and-drop
File Drop
A simple file drag and drop custom-element
Stars: ✭ 188 (+548.28%)
Mutual labels:  drag-and-drop
React Grid Layout
A draggable and resizable grid layout with responsive breakpoints, for React.
Stars: ✭ 14,732 (+50700%)
Mutual labels:  drag-and-drop
Vue.draggable
Vue drag-and-drop component based on Sortable.js
Stars: ✭ 16,530 (+56900%)
Mutual labels:  drag-and-drop
Vue Email Editor
Drag-n-Drop Email Editor Component for Vue.js
Stars: ✭ 166 (+472.41%)
Mutual labels:  drag-and-drop
React Dnd
Drag and Drop for React
Stars: ✭ 16,874 (+58086.21%)
Mutual labels:  drag-and-drop
Easy Dnd
A drag and drop implementation for Vue.js 2 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
Stars: ✭ 202 (+596.55%)
Mutual labels:  drag-and-drop
Warewolf
Effortless Microservice Design and Integration. This repository includes the code-base for the Warewolf Studio and Server.
Stars: ✭ 238 (+720.69%)
Mutual labels:  drag-and-drop
Laravel Pagebuilder
A drag and drop pagebuilder to manage pages in any Laravel project.
Stars: ✭ 189 (+551.72%)
Mutual labels:  drag-and-drop
Smart Recycler Adapter
Small, smart and generic adapter for recycler view with easy and advanced data to ViewHolder binding.
Stars: ✭ 197 (+579.31%)
Mutual labels:  drag-and-drop
Piper
A drag-and-drop mobile website builder base on Vue
Stars: ✭ 228 (+686.21%)
Mutual labels:  drag-and-drop
Dragdroptworecyclerviews
A code example demonstrating a dragging and dropping from one RecyclerView into another RecyclerView.
Stars: ✭ 181 (+524.14%)
Mutual labels:  drag-and-drop
React Email Editor
Drag-n-Drop Email Editor Component for React.js
Stars: ✭ 3,131 (+10696.55%)
Mutual labels:  drag-and-drop
Phpagebuilder
A drag and drop page builder to manage pages in any PHP project.
Stars: ✭ 168 (+479.31%)
Mutual labels:  drag-and-drop
Web designer
网页设计器图形化工具,通过拖拽组件进行页面排版和生成页面代码
Stars: ✭ 219 (+655.17%)
Mutual labels:  drag-and-drop
svelte-dragdroplist
Sortable lists with Svelte 3. Animated, touch-friendly, and accessible.
Stars: ✭ 100 (+244.83%)
Mutual labels:  drag-and-drop
Draggable
The JavaScript Drag & Drop library your grandparents warned you about.
Stars: ✭ 15,671 (+53937.93%)
Mutual labels:  drag-and-drop
Ng2 Image Upload
Angular 2 component for image uploading
Stars: ✭ 230 (+693.1%)
Mutual labels:  drag-and-drop

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.

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.

subscriptions : Model -> Sub Msg
subscriptions model =
    dnd.subscriptions model.draggable

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

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.

droppable
  : (Html.Attribute Msg)
  -> List (Html Msg)
  -> Html Msg
droppable = dnd.droppable dropMeta

You can find simple examples here.
For more complex example check Chess Board.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].