Browse Source

+ dragClass

experimental
RubaXa 9 years ago
parent
commit
6f72f4ea5b
  1. 1
      README.md
  2. 18
      Sortable.js
  3. 4
      st/app.css

1
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

18
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;
}

4
st/app.css

@ -51,6 +51,10 @@ ul {
opacity: .2;
}
#foo .sortable-drag {
background: #daf4ff;
}
img {
border: 0;

Loading…
Cancel
Save