SortableJS#516: + chosenClass

README.md

@@ -63,6 +63,7 @@ var sortable = new Sortable(el, {
 	filter: ".ignore-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",  // Class name for the drop placeholder
+	chosenClass: "sortable-chosen",  // Class name for the chosen item
 	dataIdAttr: 'data-id',
 
 	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
@@ -237,7 +238,7 @@ Sortable.create(list, {
 
 
 #### `ghostClass` option
-Class name for the drop placeholder.
+Class name for the drop placeholder (default `sortable-ghost`).
 
 Demo: http://jsbin.com/hunifu/1/edit?css,js,output
 
@@ -257,6 +258,29 @@ Sortable.create(list, {
 ---
 
 
+#### `chosenClass` option
+Class name for the chosen item  (default `sortable-chosen`).
+
+Demo: http://jsbin.com/hunifu/edit?html,css,js,output
+
+```css
+.chosen {
+  color: #fff;
+  background-color: #c00;
+}
+```
+
+```js
+Sortable.create(list, {
+  delay: 500,
+  chosenClass: "chosen"
+});
+```
+
+
+---
+
+
 #### `forceFallback` option
 If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.
 This gives us the possiblity to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.

Sortable.js

@@ -192,6 +192,7 @@
 			scrollSpeed: 10,
 			draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',
 			ghostClass: 'sortable-ghost',
+			chosenClass: 'sortable-chosen',
 			ignore: 'a, img',
 			filter: null,
 			animation: 0,
@@ -326,15 +327,18 @@
 					// Make the element draggable
 					dragEl.draggable = true;
 
-					// Disable "draggable"
-					options.ignore.split(',').forEach(function (criteria) {
-						_find(dragEl, criteria.trim(), _disableDraggable);
-					});
+					// Chosen item
+					_toggleClass(dragEl, _this.options.chosenClass, true);
 
 					// Bind the events: dragstart/dragend
 					_this._triggerDragStart(touch);
 				};
 
+				// Disable "draggable"
+				options.ignore.split(',').forEach(function (criteria) {
+					_find(dragEl, criteria.trim(), _disableDraggable);
+				});
+
 				_on(ownerDocument, 'mouseup', _this._onDrop);
 				_on(ownerDocument, 'touchend', _this._onDrop);
 				_on(ownerDocument, 'touchcancel', _this._onDrop);
@@ -606,7 +610,7 @@
 
 					if (target) {
 						parentEl = target.parentNode; // actualization
-						
+
 						if (target.animated) {
 							return;
 						}
@@ -749,7 +753,10 @@
 					}
 
 					_disableDraggable(dragEl);
+
+					// Remove class's
 					_toggleClass(dragEl, this.options.ghostClass, false);
+					_toggleClass(dragEl, this.options.chosenClass, false);
 
 					if (rootEl !== parentEl) {
 						newIndex = _index(dragEl);