From 1812232e6a1b206839d97b540aedc7cd67d2616a Mon Sep 17 00:00:00 2001 From: RubaXa Date: Mon, 12 Jan 2015 18:50:21 +0300 Subject: [PATCH 1/3] + app.js; + comments --- index.html | 201 ++++------------------------------------------------- st/app.css | 6 ++ st/app.js | 186 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 205 insertions(+), 188 deletions(-) create mode 100644 st/app.js diff --git a/index.html b/index.html index 0f056b6..15f14c2 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ +
List A
@@ -55,6 +56,7 @@
+
@@ -91,6 +93,7 @@
+
@@ -109,6 +112,7 @@
+
@@ -146,6 +150,7 @@
+
@@ -164,6 +169,7 @@
+
@@ -204,27 +210,27 @@
- +
Code example
// Simple list
 var list = document.getElementById("my-ui-list");
-new Sortable(list); // That's all.
+Sortable.create(list); // That's all.
 
 
 // Grouping
 var foo = document.getElementById("foo");
-new Sortable(foo, { group: "omega" });
+Sortable.create(foo, { group: "omega" });
 
 var bar = document.getElementById("bar");
-new Sortable(bar, { group: "omega" });
+Sortable.create(bar, { group: "omega" });
 
 
 // Or
 var container = document.getElementById("multi");
-var sort = new Sortable(container, {
+var sort = Sortable.create(container, {
   animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
   handle: ".tile__title", // Restricts sort start click/touch to the specified element
   draggable: ".tile", // Specifies which items inside the element should be sortable
@@ -238,7 +244,7 @@ sort.destroy();
 
 
 // Editable list
-var editableList = new Sortable(editable, {
+var editableList = Sortable.create(editable, {
   filter: '.js-remove',
   onFilter: function (evt) {
     var el = editableList.closest(evt.item); // get dragged item
@@ -265,188 +271,7 @@ var editableList = new Sortable(editable, {
 	
 	
 
-	
+	
 
 
 
diff --git a/st/app.css b/st/app.css
index 4dbbb8b..51cfbc1 100644
--- a/st/app.css
+++ b/st/app.css
@@ -230,3 +230,9 @@ img {
 	font-family: 'Roboto', sans-serif;
 	font-weight: 300;
 }
+
+
+
+#nested ul li {
+	background-color: rgba(0,0,0,.05);
+}
diff --git a/st/app.js b/st/app.js
new file mode 100644
index 0000000..109c70b
--- /dev/null
+++ b/st/app.js
@@ -0,0 +1,186 @@
+(function () {
+	var byId = function (id) { return document.getElementById(id); },
+		console = window.console;
+
+
+	if (!console.log) {
+		console.log = function () {
+			alert([].join.apply(arguments, ' '));
+		};
+	}
+
+
+	Sortable.create(byId('foo'), {
+		group: "words",
+		animation: 150,
+		store: {
+			get: function (sortable) {
+				var order = localStorage.getItem(sortable.options.group);
+				return order ? order.split('|') : [];
+			},
+			set: function (sortable) {
+				var order = sortable.toArray();
+				localStorage.setItem(sortable.options.group, order.join('|'));
+			}
+		},
+		onAdd: function (evt){ console.log('onAdd.foo:', [evt.item, evt.from]); },
+		onUpdate: function (evt){ console.log('onUpdate.foo:', [evt.item, evt.from]); },
+		onRemove: function (evt){ console.log('onRemove.foo:', [evt.item, evt.from]); },
+		onStart:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onSort:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onEnd: function(evt){ console.log('onEnd.foo:', [evt.item, evt.from]);}
+	});
+
+
+	Sortable.create(byId('bar'), {
+		group: "words",
+		animation: 150,
+		onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
+		onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
+		onRemove: function (evt){ console.log('onRemove.bar:', evt.item); },
+		onStart:function(evt){ console.log('onStart.foo:', evt.item);},
+		onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
+	});
+
+
+	// Multi groups
+	Sortable.create(byId('multi'), {
+		animation: 150,
+		draggable: '.tile',
+		handle: '.tile__name'
+	});
+
+	[].forEach.call(byId('multi').getElementsByClassName('tile__list'), function (el){
+		Sortable.create(el, {
+			group: 'photo',
+			animation: 150
+		});
+	});
+
+
+	// Editable list
+	var editableList = Sortable.create(byId('editable'), {
+		animation: 150,
+		filter: '.js-remove',
+		onFilter: function (evt) {
+			evt.item.parentNode.removeChild(evt.item);
+		}
+	});
+
+
+	byId('addUser').onclick = function () {
+		Ply.dialog('prompt', {
+			title: 'Add',
+			form: { name: 'name' }
+		}).done(function (ui) {
+			var el = document.createElement('li');
+			el.innerHTML = ui.data.name + '✖';
+			editableList.el.appendChild(el);
+		});
+	};
+
+
+	// Advanced groups
+	[{
+		name: 'advanced',
+		pull: true,
+		put: true
+	},
+	{
+		name: 'advanced',
+		pull: 'clone',
+		put: false
+	}, {
+		name: 'advanced',
+		pull: false,
+		put: true
+	}].forEach(function (groupOpts, i) {
+		Sortable.create(byId('advanced-' + (i + 1)), {
+			sort: (i != 1),
+			group: groupOpts,
+			animation: 150
+		});
+	});
+
+
+	// 'handle' option
+	Sortable.create(byId('handle-1'), {
+		handle: '.drag-handle',
+		animation: 150
+	});
+
+
+	// Angular example
+	angular.module('todoApp', ['ng-sortable'])
+		.controller('TodoController', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn angular', done: true},
+				{text: 'build an angular app', done: false}
+			];
+
+			$scope.addTodo = function () {
+				$scope.todos.push({text: $scope.todoText, done: false});
+				$scope.todoText = '';
+			};
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.archive = function () {
+				var oldTodos = $scope.todos;
+				$scope.todos = [];
+				angular.forEach(oldTodos, function (todo) {
+					if (!todo.done) $scope.todos.push(todo);
+				});
+			};
+		}])
+		.controller('TodoControllerNext', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn Sortable', done: true},
+				{text: 'use ng-sortable', done: false},
+				{text: 'Enjoy', done: false}
+			];
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.sortableConfig = { group: 'todo', animation: 150 };
+			'Start End Add Update Remove Sort'.split(' ').forEach(function (name) {
+				$scope.sortableConfig['on' + name] = console.log.bind(console, name);
+			});
+		}]);
+})();
+
+
+// Background
+document.addEventListener("DOMContentLoaded", function () {
+	function setNoiseBackground(el, width, height, opacity) {
+		var canvas = document.createElement("canvas");
+		var context = canvas.getContext("2d");
+
+		canvas.width = width;
+		canvas.height = height;
+
+		for (var i = 0; i < width; i++) {
+			for (var j = 0; j < height; j++) {
+				var val = Math.floor(Math.random() * 255);
+				context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
+				context.fillRect(i, j, 1, 1);
+			}
+		}
+
+		el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
+	}
+
+	setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
+}, false);

From 06aac74871f3fd25a454df2fd7709ae5494e48ab Mon Sep 17 00:00:00 2001
From: RubaXa 
Date: Mon, 12 Jan 2015 18:56:35 +0300
Subject: [PATCH 2/3] #210: + 'dropBubble: false' & 'dragoverBubble: false'
 options

---
 Sortable.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/Sortable.js b/Sortable.js
index b59986d..31386d3 100644
--- a/Sortable.js
+++ b/Sortable.js
@@ -106,7 +106,9 @@
 			animation: 0,
 			setData: function (dataTransfer, dragEl) {
 				dataTransfer.setData('Text', dragEl.textContent);
-			}
+			},
+			dropBubble: false,
+			dragoverBubble: false
 		};
 
 
@@ -465,7 +467,7 @@
 
 			if (evt.preventDefault !== void 0) {
 				evt.preventDefault();
-				evt.stopPropagation();
+				!options.dragoverBubble && evt.stopPropagation();
 			}
 
 			if (!_silent && activeGroup &&
@@ -586,7 +588,8 @@
 		},
 
 		_onDrop: function (/**Event*/evt) {
-			var el = this.el;
+			var el = this.el,
+				options = this.options;
 
 			clearInterval(this._loopId);
 			clearInterval(autoScroll.pid);
@@ -601,7 +604,7 @@
 
 			if (evt) {
 				evt.preventDefault();
-				evt.stopPropagation();
+				!options.dropBubble && evt.stopPropagation();
 
 				ghostEl && ghostEl.parentNode.removeChild(ghostEl);
 

From 3dc8cae4fc0831f717e3c721df89794e3a30b485 Mon Sep 17 00:00:00 2001
From: RubaXa 
Date: Tue, 20 Jan 2015 00:18:39 +0300
Subject: [PATCH 3/3] #231: save order

---
 ng-sortable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ng-sortable.js b/ng-sortable.js
index f7f3c8d..827acdc 100644
--- a/ng-sortable.js
+++ b/ng-sortable.js
@@ -15,7 +15,7 @@
 	'use strict';
 
 	angular.module('ng-sortable', [])
-		.constant('$version', '0.3.2')
+		.constant('$version', '0.3.3')
 		.directive('ngSortable', ['$parse', function ($parse) {
 			var removed;
 
@@ -76,7 +76,7 @@
 
 							if (evt.clone) {
 								newIndex = Sortable.utils.index(evt.clone);
-								prevItems.splice(newIndex, 0, removed);
+								prevItems.splice(oldIndex, 0, removed);
 
 								evt.from.removeChild(evt.clone);
 							}