"Drag and drop" directives for AngularJS. Work in progress.

bower install angular-dragon-drop

1. Include the dragon-drop.js script provided by this component into your app.
2. 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.

It also works on objects:

<div btf-dragon="(key, value) in list">
  {{key}}: {{value}}
</div>
<div btf-dragon="(key, value) in otherList">
  {{key}}: {{value}}
</div>

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. Send a PR if you think your additions are widely useful. :)

Instead of removing values from the array this dragon is bound to, the values are duplicated. Add the btf-double-dragon attribute to an element with the btf-dragon attribute to get the behavior.

Example:

<h2>These get copied</h2>
<div btf-dragon="item in list" btf-double-dragon>
  {{item.name}}
</div>
<h2>These get moved</h2>
<div btf-dragon="item in otherList">
  {{item.name}}
</div>

Makes the dragon only accepts items that pass the truth test function given by this argument. Add the btf-dragon-accepts attribute to an element to get the behavior.

Example:

<h2>You can only put shiny objects here</h2>h2>
<div btf-dragon="item in list" btf-dragon-accepts="shinyThings">
  {{item.name}}
</div>
<h2>This takes anything</h2>
<div btf-dragon="item in otherList">
  {{item.name}}
</div>

// in a Ctrl...
$scope.shinyThings = function (item) {
  return !!item.shiny;
};

Makes it so that the item is eliminated if it is not dropped inside of another dragon. Add the btf-eliminate attribute to an element to get the behavior.

Example:

<h2>These get copied</h2>
<div btf-dragon="item in list" btf-double-dragon>
  {{item.name}}
</div>
<h2>These get moved or eliminated</h2>
<div btf-dragon="item in otherList" btf-eliminate>
  {{item.name}}
</div>

Makes it so the drop zone and template container can be separated. Add btf-dragon-base to the dragon and btf-dragon-container to any child of the dragon.

See example.html.

MIT