diff --git a/README.md b/README.md index dcbe0af..a4ccdbb 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,7 @@ var sortable = new Sortable(el, { 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 + dragClass: "sortable-drag", // Class name for the dragging item dataIdAttr: 'data-id', forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in diff --git a/Sortable.js b/Sortable.js index bdcc2e3..52b2d2d 100644 --- a/Sortable.js +++ b/Sortable.js @@ -14,6 +14,7 @@ module.exports = factory(); } else if (typeof Package !== "undefined") { + //noinspection JSUnresolvedVariable Sortable = factory(); // export for Meteor.js } else { @@ -228,6 +229,7 @@ draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*', ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', + dragClass: 'sortable-drag', ignore: 'a, img', filter: null, animation: 0, @@ -371,7 +373,7 @@ dragEl.draggable = _this.nativeDraggable; // Chosen item - _toggleClass(dragEl, _this.options.chosenClass, true); + _toggleClass(dragEl, options.chosenClass, true); // Bind the events: dragstart/dragend _this._triggerDragStart(touch); @@ -448,8 +450,11 @@ _dragStarted: function () { if (rootEl && dragEl) { + var options = this.options; + // Apply effect - _toggleClass(dragEl, this.options.ghostClass, true); + _toggleClass(dragEl, options.ghostClass, true); + _toggleClass(dragEl, options.dragClass, false); Sortable.active = this; @@ -473,7 +478,6 @@ var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY), parent = target, - groupName = ' ' + this.options.group.name + '', i = touchDragOverListeners.length; if (parent) { @@ -550,6 +554,7 @@ _toggleClass(ghostEl, options.ghostClass, false); _toggleClass(ghostEl, options.fallbackClass, true); + _toggleClass(ghostEl, options.dragClass, true); _css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10)); _css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10)); @@ -582,6 +587,8 @@ _dispatchEvent(this, rootEl, 'clone', dragEl); } + _toggleClass(dragEl, options.dragClass, true); + if (useFallback) { if (useFallback === 'touch') { // Bind touch events @@ -1193,9 +1200,10 @@ rect = lastEl.getBoundingClientRect(); // 5 — min delta + // abs — нельзя добавлять, а то глюки при наведении сверху return ( - (abs(evt.clientY - (rect.top + rect.height)) > 5) || - (abs(evt.clientX - (rect.right + rect.width)) > 5) + (evt.clientY - (rect.top + rect.height) > 5) || + (evt.clientX - (rect.right + rect.width) > 5) ) && lastEl; } diff --git a/st/app.css b/st/app.css index 6a97f8e..1de6530 100644 --- a/st/app.css +++ b/st/app.css @@ -51,6 +51,10 @@ ul { opacity: .2; } +#foo .sortable-drag { + background: #daf4ff; +} + img { border: 0;