"Drag and drop" directives for AngularJS. Work in progress.
bower install angular-dragon-drop
- Include the
dragon-drop.js
script provided by this component into your app. - Add
btford.dragon-drop
as a module dependency to your app.
Repeats a template inside the dragon over a list.
<div btf-dragon="item in list">
{{item.name}}
</div>
<div btf-dragon="item in otherList">
{{item.name}}
</div>
You can drag from one dragon onto another, and the models will be updated accordingly.
This is not a kitchen sink every-option-you-can-think-of module. This is a starting point. Configure by forking and editing the code according to your needs.
It is possible to hook up your own callbacks into dragstart
and dragend
events.
<div btf-dragon="item in list" dragstart="myCtrlFn()" dragend="changed = true">
{{item.name}}
</div>
You can have some areas only draggable
or droppable
:
<div btf-dragon="item in list" draggable="true" droppable="2==3">
{{item.name}}
</div>
See example.html
.
MIT