Lebedev Konstantin 9 years ago
parent
commit
e87d68d0e2
  1. 47
      README.md
  2. 3
      bower.json
  3. 191
      ng-sortable.js

47
README.md

@ -14,7 +14,9 @@ Demo: http://rubaxa.github.io/Sortable/
* Built using native HTML5 drag and drop API
* Supports
* [Meteor](https://github.com/SortableJS/meteor-sortablejs)
* [AngularJS](#ng)
* [AngularJS]
* [2+](https://github.com/SortableJS/angular-sortablejs)
* [1.*](https://github.com/SortableJS/angular-legacy-sortablejs)
* React
* [ES2015+](https://github.com/SortableJS/react-sortablejs)
* [Mixin](https://github.com/SortableJS/react-mixin-sortablejs)
@ -325,49 +327,6 @@ The speed at which the window should scroll once the mouse pointer gets within t
---
<a name="ng"></a>
### Support AngularJS
Include [ng-sortable.js](ng-sortable.js)
Demo: http://jsbin.com/naduvo/1/edit?html,js,output
```html
<div ng-app="myApp" ng-controller="demo">
<ul ng-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<ul ng-sortable="{ group: 'foobar' }">
<li ng-repeat="item in foo">{{item}}</li>
</ul>
<ul ng-sortable="barConfig">
<li ng-repeat="item in bar">{{item}}</li>
</ul>
</div>
```
```js
angular.module('myApp', ['ng-sortable'])
.controller('demo', ['$scope', function ($scope) {
$scope.items = ['item 1', 'item 2'];
$scope.foo = ['foo 1', '..'];
$scope.bar = ['bar 1', '..'];
$scope.barConfig = {
group: 'foobar',
animation: 150,
onSort: function (/** ngSortEvent */evt){
// @see https://github.com/RubaXa/Sortable/blob/master/ng-sortable.js#L18-L24
}
};
}]);
```
---
### Method

3
bower.json

@ -1,8 +1,7 @@
{
"name": "Sortable",
"main": [
"Sortable.js",
"ng-sortable.js"
"Sortable.js"
],
"homepage": "http://rubaxa.github.io/Sortable/",
"authors": [

191
ng-sortable.js

@ -1,191 +0,0 @@
/**
* @author RubaXa <trash@rubaxa.org>
* @licence MIT
*/
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['angular', './Sortable'], factory);
}
else if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
require('angular');
factory(angular, require('./Sortable'));
module.exports = 'ng-sortable';
}
else if (window.angular && window.Sortable) {
factory(angular, Sortable);
}
})(function (angular, Sortable) {
'use strict';
/**
* @typedef {Object} ngSortEvent
* @property {*} model List item
* @property {Object|Array} models List of items
* @property {number} oldIndex before sort
* @property {number} newIndex after sort
*/
var expando = 'Sortable:ng-sortable';
angular.module('ng-sortable', [])
.constant('ngSortableVersion', '0.4.0')
.constant('ngSortableConfig', {})
.directive('ngSortable', ['$parse', 'ngSortableConfig', function ($parse, ngSortableConfig) {
var removed,
nextSibling,
getSourceFactory = function getSourceFactory(el, scope) {
var ngRepeat = [].filter.call(el.childNodes, function (node) {
return (
(node.nodeType === 8) &&
(node.nodeValue.indexOf('ngRepeat:') !== -1)
);
})[0];
if (!ngRepeat) {
// Without ng-repeat
return function () {
return null;
};
}
// tests: http://jsbin.com/kosubutilo/1/edit?js,output
ngRepeat = ngRepeat.nodeValue.match(/ngRepeat:\s*(?:\(.*?,\s*)?([^\s)]+)[\s)]+in\s+([^\s|]+)/);
var itemsExpr = $parse(ngRepeat[2]);
return function () {
return itemsExpr(scope.$parent) || [];
};
};
// Export
return {
restrict: 'AC',
scope: { ngSortable: "=?" },
link: function (scope, $el) {
var el = $el[0],
options = angular.extend(scope.ngSortable || {}, ngSortableConfig),
watchers = [],
getSource = getSourceFactory(el, scope),
sortable
;
el[expando] = getSource;
function _emitEvent(/**Event*/evt, /*Mixed*/item) {
var name = 'on' + evt.type.charAt(0).toUpperCase() + evt.type.substr(1);
var source = getSource();
/* jshint expr:true */
options[name] && options[name]({
model: item || source[evt.newIndex],
models: source,
oldIndex: evt.oldIndex,
newIndex: evt.newIndex
});
}
function _sync(/**Event*/evt) {
var items = getSource();
if (!items) {
// Without ng-repeat
return;
}
var oldIndex = evt.oldIndex,
newIndex = evt.newIndex;
if (el !== evt.from) {
var prevItems = evt.from[expando]();
removed = prevItems[oldIndex];
if (evt.clone) {
removed = angular.copy(removed);
prevItems.splice(Sortable.utils.index(evt.clone), 0, prevItems.splice(oldIndex, 1)[0]);
evt.from.removeChild(evt.clone);
}
else {
prevItems.splice(oldIndex, 1);
}
items.splice(newIndex, 0, removed);
evt.from.insertBefore(evt.item, nextSibling); // revert element
}
else {
items.splice(newIndex, 0, items.splice(oldIndex, 1)[0]);
}
scope.$apply();
}
sortable = Sortable.create(el, Object.keys(options).reduce(function (opts, name) {
opts[name] = opts[name] || options[name];
return opts;
}, {
onStart: function (/**Event*/evt) {
nextSibling = evt.from === evt.item.parentNode ? evt.item.nextSibling : evt.clone.nextSibling;
_emitEvent(evt);
scope.$apply();
},
onEnd: function (/**Event*/evt) {
_emitEvent(evt, removed);
scope.$apply();
},
onAdd: function (/**Event*/evt) {
_sync(evt);
_emitEvent(evt, removed);
scope.$apply();
},
onUpdate: function (/**Event*/evt) {
_sync(evt);
_emitEvent(evt);
},
onRemove: function (/**Event*/evt) {
_emitEvent(evt, removed);
},
onSort: function (/**Event*/evt) {
_emitEvent(evt);
}
}));
$el.on('$destroy', function () {
angular.forEach(watchers, function (/** Function */unwatch) {
unwatch();
});
sortable.destroy();
el[expando] = null;
el = null;
watchers = null;
sortable = null;
nextSibling = null;
});
angular.forEach([
'sort', 'disabled', 'draggable', 'handle', 'animation', 'group', 'ghostClass', 'filter',
'onStart', 'onEnd', 'onAdd', 'onUpdate', 'onRemove', 'onSort'
], function (name) {
watchers.push(scope.$watch('ngSortable.' + name, function (value) {
if (value !== void 0) {
options[name] = value;
if (!/^on[A-Z]/.test(name)) {
sortable.option(name, value);
}
}
}));
});
}
};
}]);
});
Loading…
Cancel
Save