angular-dragon-drop
"Drag and drop" directives for AngularJS. Work in progress.
Install
bower install dragon-drop
or
npm install dragon-drop
Usage
- Include the
dist/dragon-drop.min.js
script provided by this component into your app. - Add
dragon-drop
as a module dependency to your app.
For example:
Repeats a template inside the dragon over a list.
{{item.name}} {{item.name}}
You can drag from one dragon onto another, and the models will be updated accordingly.
It also works on objects:
{{key}}: {{value}} {{key}}: {{value}}
Config
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. :)
data-dragon-duplicate
Instead of removing values from the array this dragon is bound to, the values are duplicated.
Add the data-dragon-duplicate
attribute to an element with the data-dragon
attribute to get the behavior.
Example:
These get copied {{item.name}}These get moved {{item.name}}
data-dragon-accepts
Makes the dragon only accepts items that pass the truth test function given by this argument.
Add the data-dragon-accepts
attribute to an element to get the behavior.
Example:
You can only put shiny objects hereh2> {{item.name}}This takes anything {{item.name}}
// in a Ctrl...$scope { return !!itemshiny;};
data-dragon-eliminate
Makes it so that the item is eliminated if it is not dropped inside of another dragon.
Add the data-dragon-eliminate
attribute to an element to get the behavior.
Example:
These get copied {{item.name}}These get moved or eliminated {{item.name}}
data-dragon-base / data-dragon-container
Makes it so the drop zone and template container can be separated.
Add data-dragon-base
to the dragon and data-dragon-container
to any child of the dragon.
Example:
{{item.name}}Here they are separate so you can drop anywhere under the base Drop On Me {{item.name}}
Example
See example.html
.
License
MIT