+ dev

Gruntfile.js

@@ -39,7 +39,20 @@ module.exports = function (grunt) {
 			}
 		},
 
-		jquery: {}
+		jquery: {},
+
+		testcafe: {
+			test: {
+				options: {
+					files:    ['test/e2e/index.js'],
+					browsers: ['chrome'],
+					startApp: {
+						command: 'npm run http-server'
+					},
+					skipJsErrors: true //https://github.com/RubaXa/Sortable/issues/1041
+				}
+			}
+		}
 	});
 
 
@@ -82,7 +95,8 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-version');
 	grunt.loadNpmTasks('grunt-contrib-jshint');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-testcafe');
 
 	grunt.registerTask('tests', ['jshint']);
-	grunt.registerTask('default', ['tests', 'version', 'uglify:dist']);
+	grunt.registerTask('default', ['tests', 'version', 'uglify:dist', 'testcafe']);
 };

README.md

@@ -121,31 +121,31 @@ var sortable = new Sortable(el, {
 
 	// Element dragging ended
 	onEnd: function (/**Event*/evt) {
-		evt.oldIndex;  // element's old index within parent
-		evt.newIndex;  // element's new index within parent
+		var itemEl = evt.item;  // dragged HTMLElement
+		evt.to;    // target list
+		evt.from;  // previous list
+		evt.oldIndex;  // element's old index within old parent
+		evt.newIndex;  // element's new index within new parent
 	},
 
 	// Element is dropped into the list from another list
 	onAdd: function (/**Event*/evt) {
-		var itemEl = evt.item;  // dragged HTMLElement
-		evt.from;  // previous list
-		// + indexes from onEnd
+		// same properties as onEnd
 	},
 
 	// Changed sorting within list
 	onUpdate: function (/**Event*/evt) {
-		var itemEl = evt.item;  // dragged HTMLElement
-		// + indexes from onEnd
+		// same properties as onEnd
 	},
 
 	// Called by any change to the list (add / update / remove)
 	onSort: function (/**Event*/evt) {
-		// same properties as onUpdate
+		// same properties as onEnd
 	},
 
 	// Element is removed from the list into another list
 	onRemove: function (/**Event*/evt) {
-		// same properties as onUpdate
+		// same properties as onEnd
 	},
 
 	// Attempt to drag a filtered element

Sortable.js

@@ -73,7 +73,7 @@
 		supportDraggable = !!('draggable' in document.createElement('div')),
 		supportCssPointerEvents = (function (el) {
 			// false when IE11
-			if (!!navigator.userAgent.match(/Trident.*rv[ :]?11\./)) {
+			if (!!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie)/i)) {
 				return false;
 			}
 			el = document.createElement('x');
@@ -326,6 +326,10 @@
 				return; // only left button or enabled
 			}
 
+			// cancel dnd if original target is content editable
+			if (originalTarget.isContentEditable) {
+				return;
+			}
 
 			target = _closest(target, options.draggable, el);
 
@@ -344,7 +348,7 @@
 			// Check filter
 			if (typeof filter === 'function') {
 				if (filter.call(this, evt, target, this)) {
-					_dispatchEvent(_this, originalTarget, 'filter', target, el, startIndex);
+					_dispatchEvent(_this, originalTarget, 'filter', target, el, el, startIndex);
 					preventOnFilter && evt.preventDefault();
 					return; // cancel dnd
 				}
@@ -354,7 +358,7 @@
 					criteria = _closest(originalTarget, criteria.trim(), el);
 
 					if (criteria) {
-						_dispatchEvent(_this, criteria, 'filter', target, el, startIndex);
+						_dispatchEvent(_this, criteria, 'filter', target, el, el, startIndex);
 						return true;
 					}
 				});
@@ -411,7 +415,7 @@
 					_this._triggerDragStart(evt, touch);
 
 					// Drag start event
-					_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, oldIndex);
+					_dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, rootEl, oldIndex);
 				};
 
 				// Disable "draggable"
@@ -502,7 +506,7 @@
 				Sortable.active = this;
 
 				// Drag start event
-				_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);
+				_dispatchEvent(this, rootEl, 'start', dragEl, rootEl, rootEl, oldIndex);
 			} else {
 				this._nulling();
 			}
@@ -915,21 +919,21 @@
 					_toggleClass(dragEl, this.options.chosenClass, false);
 
 					// Drag stop event
-					_dispatchEvent(this, rootEl, 'unchoose', dragEl, rootEl, oldIndex);
+					_dispatchEvent(this, rootEl, 'unchoose', dragEl, parentEl, rootEl, oldIndex);
 
 					if (rootEl !== parentEl) {
 						newIndex = _index(dragEl, options.draggable);
 
 						if (newIndex >= 0) {
 							// Add event
-							_dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);
+							_dispatchEvent(null, parentEl, 'add', dragEl, parentEl, rootEl, oldIndex, newIndex);
 
 							// Remove event
-							_dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);
+							_dispatchEvent(this, rootEl, 'remove', dragEl, parentEl, rootEl, oldIndex, newIndex);
 
 							// drag from one list and drop into another
-							_dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
-							_dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
+							_dispatchEvent(null, parentEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex);
+							_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex);
 						}
 					}
 					else {
@@ -939,8 +943,8 @@
 
 							if (newIndex >= 0) {
 								// drag & drop within the same list
-								_dispatchEvent(this, rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);
-								_dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
+								_dispatchEvent(this, rootEl, 'update', dragEl, parentEl, rootEl, oldIndex, newIndex);
+								_dispatchEvent(this, rootEl, 'sort', dragEl, parentEl, rootEl, oldIndex, newIndex);
 							}
 						}
 					}
@@ -951,7 +955,7 @@
 							newIndex = oldIndex;
 						}
 
-						_dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);
+						_dispatchEvent(this, rootEl, 'end', dragEl, parentEl, rootEl, oldIndex, newIndex);
 
 						// Save sorting
 						this.save();
@@ -1256,7 +1260,7 @@
 
 
 
-	function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {
+	function _dispatchEvent(sortable, rootEl, name, targetEl, toEl, fromEl, startIndex, newIndex) {
 		sortable = (sortable || rootEl[expando]);
 
 		var evt = document.createEvent('Event'),
@@ -1265,7 +1269,7 @@
 
 		evt.initEvent(name, true, true);
 
-		evt.to = rootEl;
+		evt.to = toEl || rootEl;
 		evt.from = fromEl || rootEl;
 		evt.item = targetEl || rootEl;
 		evt.clone = cloneEl;
@@ -1421,12 +1425,15 @@
 	}
 
 	function _clone(el) {
-		return $
-			? $(el).clone(true)[0]
-			: (Polymer && Polymer.dom
-				? Polymer.dom(el).cloneNode(true)
-				: el.cloneNode(true)
-			);
+		if (Polymer && Polymer.dom) {
+			return Polymer.dom(el).cloneNode(true);
+		}
+		else if ($) {
+			return $(el).clone(true)[0];
+		}
+		else {
+			return el.cloneNode(true);
+		}
 	}
 
 	function _saveInputCheckedState(root) {

package.json

@@ -4,15 +4,19 @@
   "version": "1.6.1",
   "devDependencies": {
     "grunt": "*",
-    "grunt-version": "*",
     "grunt-contrib-jshint": "*",
-    "grunt-contrib-uglify": "*"
+    "grunt-contrib-uglify": "*",
+    "grunt-testcafe": "^0.15.0",
+    "grunt-version": "*",
+    "http-server": "^0.9.0",
+    "testcafe": "^0.16.0"
   },
   "description": "Minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports AngularJS and any CSS library, e.g. Bootstrap.",
   "main": "Sortable.js",
   "scripts": {
     "test": "./node_modules/grunt/bin/grunt",
-    "prepublish": "./node_modules/grunt/bin/grunt"
+    "prepublish": "./node_modules/grunt/bin/grunt",
+    "http-server": "http-server -s ./"
   },
   "repository": {
     "type": "git",

test/e2e/index-page-model.js

@@ -0,0 +1,14 @@
+import { Selector } from 'testcafe';
+
+export default class IndexPage {
+    constructor () {
+        const listAContainer = Selector('#foo');
+        const listAItems     = listAContainer.find('li');
+
+        this.listA = {
+            container: listAContainer,
+            items:     listAItems,
+            getItem:   text => listAItems.withText(text)
+        };
+    }
+}

test/e2e/index.js

@@ -0,0 +1,22 @@
+import IndexPage from './index-page-model';
+
+const indexPage = new IndexPage();
+
+fixture `Tests`
+    .page('http://localhost:8080/index.html');
+
+test('List A', async t => {
+    const listA      = indexPage.listA;
+    const firstItem  = listA.items.nth(0);
+    const secondItem = listA.items.nth(1);
+    const hippoText  = 'Бегемот';
+    const foodText   = 'Корм';
+
+    await t
+        .expect(firstItem.innerText).eql(hippoText)
+        .expect(secondItem.innerText).eql(foodText)
+        .dragToElement(firstItem, secondItem, { speed: 0.5 })
+        .expect(firstItem.innerText).eql(foodText)
+        .expect(secondItem.innerText).eql(hippoText);
+});
+