https://github.com/btford/angular-dragon-drop

Drag and Drop for AngularJS
https://github.com/btford/angular-dragon-drop

Last synced: about 2 months ago
JSON representation

Drag and Drop for AngularJS

• Host: GitHub
• URL: https://github.com/btford/angular-dragon-drop
• Owner: btford
• Created: 2013-04-08T11:53:32.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-07-22T16:46:01.000Z (over 11 years ago)
• Last Synced: 2024-08-10T02:12:35.843Z (4 months ago)
• Language: JavaScript
• Size: 205 KB
• Stars: 225
• Watchers: 22
• Forks: 53
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# angular-dragon-drop

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

## Install

```shell

bower install angular-dragon-drop

```

## Usage

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.

```html



  {{item.name}}





  {{item.name}}



```

You can drag from one dragon onto another, and the models will be updated accordingly.


It also works on objects:

```html



  {{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. :)

### btf-double-dragon

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:

```html

These get copied



  {{item.name}}



These get moved



  {{item.name}}



```


### btf-dragon-accepts

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:

```html

You can only put shiny objects here
h2>



  {{item.name}}



This takes anything



  {{item.name}}



```


```javascript

// in a Ctrl...

$scope.shinyThings = function (item) {

  return !!item.shiny;

};

```

## Example

See [`example.html`](http://htmlpreview.github.io/?https://github.com/btford/angular-dragon-drop/blob/master/example.html).

## License

MIT