bachvtuan/html5-sortable-angularjs

A directive for angular support sortable list base on pure html5

HTML5 SORTABLE FOR ANGULARJS

I used sortable which provided by jqueryUI at this link, That's good but it's pretty heavy to use because not just sortable code is included, I just need sortable method, So I decided make sortable items by html5 instead, almost modern browsers support this.
Below is some reference links that help me get an overview before coding this directive.

• UI.Sortable directive

• Native HTML5 Drag and Drop

Demo

DEMO LINK

Directive features

1. Native html5 sortable( jquery no longer required ).
2. Support sortable which array is given ( pass by ngModel)
3. You can choose specific handle element on item element.
4. Offer callback when init directive or after item is dropped.
5. Auto update sortable DOM when ngmodel is changed or removed sub item.
6. Cross dropping

Bower

bower install html5-sortable-angularjs

NPM

npm i html5-sortable-angularjs

How to use

Include html5.sortable to your app

 var app = angular.module('app', [ 
  'html5.sortable'
 ]);

Define any varriable in scope with type is array

$scope.list = [
  {id:1,letter:'A'},
  {id:2,letter:'B'},
  {id:3,letter:'C'},
  {id:4,letter:'D'},
];

Define sortable options

//Options for sortable code
$scope.sortable_option = {
  //Only allow draggable when click on handle element
  handle:'p.handle',
  //Construct method before sortable code
  construct:function(model){
    for ( var i = 0; i < model.length; i++ ){
      model[i].letter +=" (constructed)";
    }
  },
  //Callback after item is dropped
  stop:function(list, dropped_index){
    list[ dropped_index].letter += " Dropped";
  }
};

Below is example in template code

<div class="columns" html-sortable="sortable_option" ng-model="list">
  <div class="column" ng-repeat="item in list"  >
    <header>{{item.letter}}</header>
    <p class="handle">DRAG</p>
  </div>
</div>

If you don't want using option, you can edit to html-sortable="" in template.

LICENSE

MIT

Done

Have fun !

html5-sortable-angularjs's Issues

iOS support lacking

this plugin works very well on desktop. however, on iOS devices it does not work. I added a ios drag and drop shim from
https://github.com/timruffles/ios-html5-drag-drop-shim

I can drag and rearrange, but there is some issue with the handle. If I specify a handle, I can still drag other area. And I cannot drop unless I drag by touching on the handle. I have to leave the handle blank, then the whole element becomes draggable, thereby disabling a functionality offered by the plugin.

The library does not allow cross dropping of the element to an empty list

Steps to reproduce:

1. Go to http://bachvtuan.github.io/html5-sortable-angularjs/
2. In the Cross Dropping example drag and drop all the elements from left column to the right: (A, B, and C, to EFGH list)
   
3. Now if you try to drag the elements back from right to left hand list, you won't be able to do so, because the destination list is empty

why using angular.copy

using angular.copy in handleDrop causes side effects hard to debug.

i had an array of objects, and elements were copyed to another array (lets call it helper array), sorting was based on this. after handleDrop, the object was replaced in helper array, but the original array kept the original object..

why you use angular.copy when creating the temp variable? what's the use case when it's needed?

IE support

Hey, I'm running IE 11 and the begin drag if failing when setting e.dataTransfer.setData('text/plain', 'anything'); with Unexepected call to method or property access. I was wondering if you know anything about that.

You can use my test here

No License is included in the project

So, your code and project looks cool, but you didn't include a license in with your project. What license if any are you releasing your code under?

My suggestion and request would be the MIT license, but it's up to you :)

Thanks

Remove logging

Hey, I was wondering if you could remove the $log.info, or at least turn them into $log.debug so they can be turned off.

stop callback in example is not working

in "How to use" you expect second argument to be drop_item, but in source code:

sortable.options.stop(ngModel.$modelValue, drop_index,
              element.extra_data, $window['drag_source_extra']);

you are calling fn with index as second argument ;)

PS: Also handle class is missing in <p>

Nested sortables

Do you have some quick idea how could be nested sortable achieved?

Use case:
Lets have a grid table with rows and columns. Cells inside rows are sortable and also rows inside table are sortable.

Problem:
Dropping cell in row fires also drop in table.

My possible solution:

1. checking if dropped item is from child list
   or
2. isolated scopes for sortables
   or
3. something else..

:)

Directive not working on github but the one on the examples does.

We where using your directive which is really nice but the code on github is not working. We ended copying the one in the examples and it seems newer than the one in github.