+ Intermediate version before release

Author: RubaXa

Gruntfile.js

@@ -1,20 +1,49 @@
-'use strict';
+module.exports = function (grunt) {
+	'use strict';
 
-module.exports = function (grunt){
 	grunt.initConfig({
 		pkg: grunt.file.readJSON('package.json'),
 
 		version: {
 			src: ['<%= pkg.exportName %>.js', '*.json']
 		},
 
+		jshint: {
+			all: ['*.js', '!*.min.js'],
+
+			options: {
+				strict: true,
+				newcap: false,	// "Tolerate uncapitalized constructors"
+				node: true,
+				expr: true, // - true && call() "Expected an assignment or function call and instead saw an expression."
+				supernew: true, // - "Missing '()' invoking a constructor."
+				laxbreak: true,
+				white: true,
+				globals: {
+					define: true,
+					test: true,
+					expect: true,
+					module: true,
+					asyncTest: true,
+					start: true,
+					ok: true,
+					equal: true,
+					notEqual: true,
+					deepEqual: true,
+					window: true,
+					document: true,
+					performance: true
+				}
+			}
+		},
+
 		uglify: {
 			options: {
 				banner: '/*! <%= pkg.exportName %> <%= pkg.version %> - <%= pkg.license %> | <%= pkg.repository.url %> */\n'
 			},
 			dist: {
 				files: {
-					  '<%= pkg.exportName %>.min.js': ['<%= pkg.exportName %>.js']
+					'<%= pkg.exportName %>.min.js': ['<%= pkg.exportName %>.js']
 				}
 			}
 		},
@@ -31,8 +60,8 @@ module.exports = function (grunt){
 	});
 
 
-	// These plugins provide necessary tasks.
 	grunt.loadNpmTasks('grunt-version');
+	grunt.loadNpmTasks('grunt-contrib-jshint');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
 	grunt.loadNpmTasks('grunt-shell');
 
@@ -44,6 +73,6 @@ module.exports = function (grunt){
 	// grunt.regsterTask('meteor', ['shell:meteor-test', 'shell:meteor-publish']);
 	grunt.registerTask('meteor', 'shell:meteor-publish');
 
-	// Default task.
-	grunt.registerTask('default', ['version', 'uglify']);
+	grunt.registerTask('tests', ['jshint']);
+	grunt.registerTask('default', ['tests', 'version', 'uglify']);
 };

README.md

@@ -1,17 +1,19 @@
 # Sortable
-
 Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.
 
 Demo: http://rubaxa.github.io/Sortable/
 
+
 ## Features
-* Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers
-* Built using native HTML5 drag and drop API
-* Can drag from one list to another or within the same list
-* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
-* Simple API
-* Lightweight, 2KB gzipped
-* No jQuery
+
+ * Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers
+ * Can drag from one list to another or within the same list
+ * Animation moving items when sorting (css animation)
+ * Supports drag handles *and selectable text* (better than voidberg's html5sortable)
+ * Built using native HTML5 drag and drop API
+ * Support [AngularJS](#ng)
+ * Simple API
+ * No jQuery
 
 
 ### Usage
@@ -25,7 +27,7 @@ Demo: http://rubaxa.github.io/Sortable/
 
 ```js
 var el = document.getElementById('items');
-new Sortable(el);
+var sortable = Sortable.create(el);
 ```
 
 
@@ -34,25 +36,39 @@ new Sortable(el);
 
 ### Options
 ```js
-new Sortable(el, {
-	group: "name",
+var sortabel = new Sortable(el, {
+	group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] }
+	sort: true, // sorting inside list
 	store: null, // @see Store
+	animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
 	handle: ".my-handle", // Drag handle selector within list items
-	filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
+	filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function)
 	draggable: ".item",   // Specifies which items inside the element should be sortable
 	ghostClass: "sortable-ghost",
-	
+	setData: function (dataTransfer, dragEl) {
+		dataTransfer.setData('Text', dragEl.textContent);
+	},
+
 	onStart: function (/**Event*/evt) { /* dragging */ },
 	onEnd: function (/**Event*/evt) { /* dragging */ },
 
+	// Element is added to the list
 	onAdd: function (/**Event*/evt){
 		var itemEl = evt.item; // dragged HTMLElement
+		itemEl.from; // previous list
 	},
 
+	// Changed sorting in list
 	onUpdate: function (/**Event*/evt){
 		var itemEl = evt.item; // dragged HTMLElement
 	},
 
+	// Called by any change to the list (add / update / remove)
+	onSort: function (/**Event*/evt){
+		var itemEl = evt.item; // dragged HTMLElement
+	},
+
+	// The element is removed from the list
 	onRemove: function (/**Event*/evt){
 		var itemEl = evt.item; // dragged HTMLElement
 	},
@@ -63,20 +79,24 @@ new Sortable(el, {
 });
 ```
 
-#### handle
+
+---
+
+
+#### `handle` option
 
 To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
 
 ```js
-new Sortable(el, {
+var sortable = new Sortable(el, {
         handle: ".my-handle",
 });
 ```
 
 ```html
 <ul>
-	<li><span class="my-handle">:: </span> list item text one
-	<li><span class="my-handle">:: </span> list item text two
+	<li><span class="my-handle">::</span> list item text one
+	<li><span class="my-handle">::</span> list item text two
 </ul>
 ```
 
@@ -86,10 +106,61 @@ new Sortable(el, {
 }
 ```
 
+
+---
+
+
+### `group` option
+
+ * name:`string` — group name
+ * pull:`true|false|'clone'` — ability to move from the list. `clone` — cloning drag item when moving from the list.
+ * put:`true|false|["foo", "bar"]` — the possibility of adding an element from the other list, or an array of names groups, which can be taken.
+
+
+---
+
+<a name="ng"></a>
+### Support AngularJS
+Include [ng-sortable.js](ng-sortable.js)
+
+```html
+<div ng-app"myApp">
+	<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(function () {
+		this.items = ['item 1', 'item 2'];
+		this.foo = ['foo 1', '..'];
+		this.bar = ['bar 1', '..'];
+		this.barConfig = { group: 'foobar', animation: 150 };
+	});
+```
+
+
 ---
 
 
-### Methods
+### Method
+
+
+##### option(name:`String`[, value:`*`]):`*`
+Get or set the option.
+
+
 
 ##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
 For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
@@ -117,13 +188,15 @@ Serializes the sortable's item `data-id`'s into an array of string.
 
 ##### sort(order:`String[]`)
 Sorts the elements according to the array.
+
 ```js
 var order = sortable.toArray();
 sortable.sort(order.reverse()); // apply
 ```
 
 
 ##### destroy()
+Removes the sortable functionality completely.
 
 
 ---
@@ -141,7 +214,7 @@ Saving and restoring of the sort.
 ```
 
 ```js
-new Sortable(el, {
+Sortable.create(el, {
 	group: "localStorage-example",
 	store: {
 		/**
@@ -185,6 +258,7 @@ new Sortable(el, {
 * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element
 
 
+
 ---