diff --git a/README.md b/README.md index 2f589e0..aadf878 100644 --- a/README.md +++ b/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. diff --git a/Sortable.js b/Sortable.js index d117906..3fb941a 100644 --- a/Sortable.js +++ b/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);