Merge pull request SortableJS#154 from RubaXa/indexes

Expose old & new element index on drag&drop
yoshi6jp · Dec 8, 2014 · a5f5e32 · a5f5e32
2 parents b156279 + a0e3a60
commit a5f5e32
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ You can use any element for the list and its elements, not just `ul`/`li`. Here
 ### Options
 ```js
 var sortable = new Sortable(el, {
-	group: "name",  // or { name: "..", pull: [true, false, clone], put: [true, false, array] }
+	group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
 	sort: true,  // sorting inside list
 	disabled: false, // Disables the sortable if set to true.
 	store: null,  // @see Store
@@ -52,32 +52,42 @@ var sortable = new Sortable(el, {
 		dataTransfer.setData('Text', dragEl.textContent);
 	},
 
-	onStart: function (/*Event*/evt) { /* dragging started*/ },
-	onEnd: function (/*Event*/evt) { /* dragging ended */ },
+	// dragging started
+	onStart: function (/**Event*/evt) {
+		evt.oldIndex;  // element index within parent
+	},
+
+	// dragging ended
+	onEnd: function (/**Event*/evt) {
+		evt.oldIndex;  // element's old index within parent
+		evt.newIndex;  // element's new index within parent
+	},
 
 	// Element is dropped into the list from another list
-	onAdd: function (/*Event*/evt){
-		var itemEl = evt.item; // dragged HTMLElement
-		itemEl.from; // previous list
+	onAdd: function (/**Event*/evt) {
+		var itemEl = evt.item;  // dragged HTMLElement
+		itemEl.from;  // previous list
+		// + indexes from onEnd
 	},
 
 	// Changed sorting within list
-	onUpdate: function (/*Event*/evt){
-		var itemEl = evt.item; // dragged HTMLElement
+	onUpdate: function (/**Event*/evt) {
+		var itemEl = evt.item;  // dragged HTMLElement
+		// + indexes from onEnd
 	},
 
 	// Called by any change to the list (add / update / remove)
-	onSort: function (/*Event*/evt){
-		var itemEl = evt.item; // dragged HTMLElement
+	onSort: function (/**Event*/evt) {
+		// same properties as onUpdate
 	},
 
 	// Element is removed from the list into another list
-	onRemove: function (/*Event*/evt){
-		var itemEl = evt.item; // dragged HTMLElement
+	onRemove: function (/**Event*/evt) {
+		// same properties as onUpdate
 	},
 
-	onFilter: function (/*Event*/evt){
-		var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
+	onFilter: function (/**Event*/evt) {
+		var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
 	}
 });
 ```

diff --git a/Sortable.js b/Sortable.js
@@ -25,6 +25,7 @@
 	"use strict";
 
 	var dragEl,
+		startIndex,
 		ghostEl,
 		cloneEl,
 		rootEl,
@@ -47,12 +48,14 @@
 
 		_silent = false,
 
-		_dispatchEvent = function (rootEl, name, targetEl, fromEl) {
+		_dispatchEvent = function (rootEl, name, targetEl, fromEl, startIndex, newIndex) {
 			var evt = document.createEvent('Event');
 
 			evt.initEvent(name, true, true);
 			evt.item = targetEl || rootEl;
 			evt.from = fromEl || rootEl;
+			if (startIndex !== undefined) evt.oldIndex = startIndex;
+			if (newIndex !== undefined) evt.newIndex = newIndex;
 
 			rootEl.dispatchEvent(evt);
 		},
@@ -163,6 +166,8 @@
 				el = this.el,
 				filter = options.filter;
 
+			// get the index of the dragged element within its parent
+			startIndex = _index(target);
 
 			if (evt.type === 'mousedown' && evt.button !== 0 || options.disabled) {
 				return; // only left button or enabled
@@ -245,7 +250,7 @@
 				}
 
 
-				_dispatchEvent(dragEl, 'start');
+				_dispatchEvent(dragEl, 'start', undefined, undefined, startIndex);
 
 
 				if (activeGroup.pull == 'clone') {
@@ -502,28 +507,31 @@
 				ghostEl && ghostEl.parentNode.removeChild(ghostEl);
 
 				if (dragEl) {
+					// get the index of the dragged element within its parent
+					var newIndex = _index(dragEl);
 					_disableDraggable(dragEl);
 					_toggleClass(dragEl, this.options.ghostClass, false);
 
 					if (!rootEl.contains(dragEl)) {
-						_dispatchEvent(dragEl, 'sort', dragEl, dragEl.parentNode);
-						_dispatchEvent(rootEl, 'sort', dragEl);
+						// drag from one list and drop into another
+						_dispatchEvent(dragEl, 'sort', dragEl, dragEl.parentNode, startIndex, newIndex);
+						_dispatchEvent(rootEl, 'sort', dragEl, undefined, startIndex, newIndex);
 
 						// Add event
-						_dispatchEvent(dragEl, 'add', dragEl, rootEl);
+						_dispatchEvent(dragEl, 'add', dragEl, rootEl, startIndex, newIndex);
 
 						// Remove event
-						_dispatchEvent(rootEl, 'remove', dragEl);
+						_dispatchEvent(rootEl, 'remove', dragEl, undefined, startIndex, newIndex);
 					}
 					else if (dragEl.nextSibling !== nextEl) {
-						// Update event
-						_dispatchEvent(dragEl, 'update');
-						_dispatchEvent(dragEl, 'sort');
+						// drag & drop within the same list
+						_dispatchEvent(dragEl, 'update', undefined, undefined, startIndex, newIndex);
+						_dispatchEvent(dragEl, 'sort', undefined, undefined, startIndex, newIndex);
 
 						cloneEl && cloneEl.parentNode.removeChild(cloneEl);
 					}
 
-					_dispatchEvent(rootEl, 'end');
+					_dispatchEvent(rootEl, 'end', undefined, undefined, startIndex, newIndex);
 				}
 
 				// Set NULL
@@ -793,6 +801,18 @@
 		return sum.toString(36);
 	}
 
+	/**
+	 * Returns the index of an element within its parent
+	 * @param el
+	 * @returns {HTMLElement}
+	 */
+	function _index(/**HTMLElement*/el) {
+		var index = 0;
+		while ((el = el.previousElementSibling)) {
+			index++;
+		}
+		return index;
+	}
 
 	// Export utils
 	Sortable.utils = {
@@ -803,11 +823,12 @@
 		bind: _bind,
 		closest: _closest,
 		toggleClass: _toggleClass,
-		dispatchEvent: _dispatchEvent
+		dispatchEvent: _dispatchEvent,
+		index: _index
 	};
 
 
-	Sortable.version = '0.7.1';
+	Sortable.version = '0.7.2';
 
 
 	/**