btford / angular-dragon-drop Goto Github PK

Drag and Drop for AngularJS

JavaScript 100.00%

angular-dragon-drop's Introduction

angular-dragon-drop

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

Install

bower install angular-dragon-drop

Usage

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.

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>

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:

<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>

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:

<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;
};

Example

See example.html.

License

MIT

angular-dragon-drop's People

Contributors

Stargazers

Watchers

angular-dragon-drop's Issues

What's the browser support?

Can you provide some information on what browsers are supported for this? I'm considering using it on a project, but want to ensure it'll work with IE 9+

when adding "orderBy" filter to second collection-no item displayed

I want both collections to be sorted by some id:
After i dragged some item to dropabble area - i want the dropped collection to be sorted too.

angular.module('ExampleApp', ['btford.dragon-drop']).
  controller('MainCtrl', function ($scope) {
    $scope.things = [{name:'one',id:3}, {name:'two',id:2}, {name:'three',id:1}];
    $scope.otherThings = [];
  });

When "orderby" filter added to first collection in the demo - its displayed correctly
but nothing displayed after adding "orderby" filter to second droparea
(after you dragged and dropped some items from the first)

< class="row">
  <div class="span6">
    <h3>Things</h3>
    <div btf-dragon="thing in things | orderBy:'id'">{{thing.name}}</div>
  </div>
  <div class="span6">
    <h3>Other Things</h3>
    <div btf-dragon="thing in otherThings  | orderBy:'id'">{{thing.name}}</div>
  </div>
</div>

Add support for ng-filter

e.g. to support something like this:

<input type='text' ng-model='search'>
<ul btf-dragon="val in things | filter:search">
   <li> {{val}} </li>
</ul>

I saw there were some forks -- a few of which attempt to add support for sorting or the orderBy filter, but I think this directive could really benefit from generic ng-filter support. If I resolve it myself, I'll send a pr for consideration; if anyone has already added support for it, I'd love to see your implementation.

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