New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

sortable-dnd

Package Overview
Dependencies
Maintainers
1
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sortable-dnd - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

types/index.d.ts

622

dist/sortable.js
/*!
* sortable-dnd v0.4.1
* sortable-dnd v0.4.2
* open source under the MIT license

@@ -127,5 +127,8 @@ * https://github.com/mfuu/sortable-dnd#readme

var R_SPACE = /\s+/g;
var CSSTRANSITIONS = ['-webkit-transition', '-moz-transition', '-ms-transition', '-o-transition', 'transition'];
var CSSTRANSFORMS = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform'];
var SUPPORTPASSIVE = supportPassive();
var events = {
start: ['pointerdown', 'touchstart', 'mousedown'],
move: ['pointermove', 'touchmove', 'mousemove'],
end: ['pointerup', 'pointercancel', 'touchend', 'touchcancel', 'mouseup']
};
var SUPPORT_PASSIVE = supportPassive();

@@ -141,4 +144,21 @@ function userAgent(pattern) {

var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
var IOS = userAgent(/iP(ad|od|hone)/i);
var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);
var vendorPrefix = function () {
if (typeof window === 'undefined' || typeof document === 'undefined') {
// Server environment
return '';
} // window.getComputedStyle() returns null inside an iframe with display: none
// in this case return an array with a fake mozilla style in it.
var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe'];
var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1];
switch (pre) {
case 'ms':
return 'ms';
default:
return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : '';
}
}();
/**

@@ -166,11 +186,3 @@ * check if is HTMLElement

function setTransition(el, transition) {
if (transition) {
if (transition === 'none') CSSTRANSITIONS.forEach(function (ts) {
return css(el, ts, 'none');
});else CSSTRANSITIONS.forEach(function (ts) {
return css(el, ts, "".concat(ts.split('transition')[0], "transform ").concat(transition));
});
} else CSSTRANSITIONS.forEach(function (ts) {
return css(el, ts, '');
});
el.style["".concat(vendorPrefix, "Transition")] = transition ? transition === 'none' ? 'none' : "".concat(transition) : '';
}

@@ -184,7 +196,3 @@ /**

function setTransform(el, transform) {
if (transform) CSSTRANSFORMS.forEach(function (tf) {
return css(el, tf, "".concat(tf.split('transform')[0]).concat(transform));
});else CSSTRANSFORMS.forEach(function (tf) {
return css(el, tf, '');
});
el.style["".concat(vendorPrefix, "Transform")] = transform ? "".concat(transform) : '';
}

@@ -232,3 +240,3 @@ /**

if (window.addEventListener) {
el.addEventListener(event, fn, SUPPORTPASSIVE || !IE11OrLess ? captureMode : false);
el.addEventListener(event, fn, SUPPORT_PASSIVE || !IE11OrLess ? captureMode : false);
} else if (window.attachEvent) {

@@ -248,3 +256,3 @@ el.attachEvent('on' + event, fn);

if (window.removeEventListener) {
el.removeEventListener(event, fn, SUPPORTPASSIVE || !IE11OrLess ? captureMode : false);
el.removeEventListener(event, fn, SUPPORT_PASSIVE || !IE11OrLess ? captureMode : false);
} else if (window.detachEvent) {

@@ -358,3 +366,3 @@ el.detachEvent('on' + event, fn);

* @param {HTMLElement} el The element whose boundingClientRect is wanted
* @param {Object} check
* @param {Object} check
* @example - {

@@ -596,128 +604,112 @@ * - parent: true | false, 'check if parentNode.height < el.height'

}
function debounce(fn, delay, immediate) {
var timer = null;
return function () {
var context = this,
args = arguments;
timer && clearTimeout(timer);
immediate && !timer && fn.apply(context, args);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
function _nextTick(fn) {
return setTimeout(fn, 0);
}
var expando = 'Sortable' + Date.now();
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback) {
return setTimeout(callback, 17);
};
}
function throttle(fn, delay) {
var timer = null;
return function () {
var context = this,
args = arguments;
if (!timer) {
timer = setTimeout(function () {
timer = null;
fn.apply(context, args);
}, delay);
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
function _nextTick(fn) {
return setTimeout(fn, 0);
}
var expando = 'Sortable' + Date.now();
function AutoScroll() {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback) {
return setTimeout(callback, 17);
var AutoScroll = /*#__PURE__*/function () {
function AutoScroll() {
_classCallCheck(this, AutoScroll);
this.autoScrollAnimationFrame = null;
this.speed = {
x: 10,
y: 10
};
}
return {
_autoScroll: throttle(function (Sortable, eventState) {
if (!Sortable.scrollEl) return; // check if is moving now
_createClass(AutoScroll, [{
key: "clear",
value: function clear() {
if (this.autoScrollAnimationFrame == null) {
return;
}
if (!(eventState.down && eventState.move)) return;
var _eventState$move = eventState.move,
clientX = _eventState$move.clientX,
clientY = _eventState$move.clientY;
if (clientX === void 0 || clientY === void 0) return;
cancelAnimationFrame(this.autoScrollAnimationFrame);
this.autoScrollAnimationFrame = null;
}
}, {
key: "update",
value: function update(parentNode, scrollThreshold, downEvent, moveEvent) {
var _this = this;
if (Sortable.scrollEl === Sortable.ownerDocument) ; else {
var _Sortable$scrollEl = Sortable.scrollEl,
scrollTop = _Sortable$scrollEl.scrollTop,
scrollLeft = _Sortable$scrollEl.scrollLeft,
scrollHeight = _Sortable$scrollEl.scrollHeight,
scrollWidth = _Sortable$scrollEl.scrollWidth;
if (downEvent && moveEvent) {
this.autoScroll(parentNode, scrollThreshold, moveEvent);
}
var _getRect = getRect(Sortable.scrollEl),
top = _getRect.top,
right = _getRect.right,
bottom = _getRect.bottom,
left = _getRect.left,
height = _getRect.height,
width = _getRect.width;
cancelAnimationFrame(this.autoScrollAnimationFrame);
this.autoScrollAnimationFrame = requestAnimationFrame(function () {
return _this.update(parentNode, scrollThreshold, downEvent, moveEvent);
});
}
}, {
key: "autoScroll",
value: function autoScroll(parentNode, scrollThreshold, evt) {
if (!parentNode) return;
var clientX = evt.clientX,
clientY = evt.clientY;
if (clientX === void 0 || clientY === void 0) return;
var rect = getRect(parentNode);
if (!rect) return;
var scrollTop = parentNode.scrollTop,
scrollLeft = parentNode.scrollLeft,
scrollHeight = parentNode.scrollHeight,
scrollWidth = parentNode.scrollWidth;
parentNode.clientHeight;
parentNode.clientWidth;
var top = rect.top,
right = rect.right,
bottom = rect.bottom,
left = rect.left,
height = rect.height,
width = rect.width; // check direction
var _Sortable$options = Sortable.options,
scrollStep = _Sortable$options.scrollStep,
scrollThreshold = _Sortable$options.scrollThreshold; // check direction
var toTop = scrollTop > 0 && clientY >= top && clientY <= top + scrollThreshold;
var toLeft = scrollLeft > 0 && clientX >= left && clientX <= left + scrollThreshold;
var toRight = scrollLeft + width < scrollWidth && clientX <= right && clientX >= right - scrollThreshold;
var toBottom = scrollTop + height < scrollHeight && clientY <= bottom && clientY >= bottom - scrollThreshold;
var scrollx = 0,
scrolly = 0;
var totop = scrollTop > 0 && clientY >= top && clientY <= top + scrollThreshold;
var toleft = scrollLeft > 0 && clientX >= left && clientX <= left + scrollThreshold;
var toright = scrollLeft + width < scrollWidth && clientX <= right && clientX >= right - scrollThreshold;
var tobottom = scrollTop + height < scrollHeight && clientY <= bottom && clientY >= bottom - scrollThreshold; // scroll position
if (toLeft) {
scrollx = Math.floor(Math.max(-1, (clientX - left) / scrollThreshold - 1) * this.speed.x);
} else if (toRight) {
scrollx = Math.ceil(Math.min(1, (clientX - right) / scrollThreshold + 1) * this.speed.x);
} else {
scrollx = 0;
}
var position = {
x: scrollLeft,
y: scrollTop
};
if (toTop) {
scrolly = Math.floor(Math.max(-1, (clientY - top) / scrollThreshold - 1) * this.speed.y);
} else if (toBottom) {
scrolly = Math.ceil(Math.min(1, (clientY - bottom) / scrollThreshold + 1) * this.speed.y);
} else {
scrolly = 0;
}
if (totop) {
if (toleft) {
// to top-left
position.x = scrollLeft - scrollStep;
} else if (toright) {
// to top-right
position.x = scrollLeft + scrollStep;
} else {
// to top
position.x = scrollLeft;
}
if (scrolly) {
parentNode.scrollTop += scrolly;
}
position.y = scrollTop - scrollStep;
} else if (tobottom) {
if (toleft) {
// to bottom-left
position.x = scrollLeft - scrollStep;
} else if (toright) {
// to bottom-right
position.x = scrollLeft + scrollStep;
} else {
// to bottom
position.x = scrollLeft;
}
if (scrollx) {
parentNode.scrollLeft += scrollx;
}
}
}]);
position.y = scrollTop + scrollStep;
} else if (toleft) {
// to left
position.x = scrollLeft - scrollStep;
position.y = scrollTop;
} else if (toright) {
// to right
position.x = scrollLeft + scrollStep;
position.y = scrollTop;
} // if need to scroll
return AutoScroll;
}();
if (totop || toleft || toright || tobottom) {
requestAnimationFrame(function () {
Sortable.scrollEl.scrollTo(position.x, position.y);
Sortable._autoScroll(Sortable, eventState);
});
}
}
}, 10)
};
}
function Animation() {

@@ -965,3 +957,3 @@ var animationState = [];

},
_onMultiChange: debounce(function (_ref3) {
_onMultiChange: function _onMultiChange(_ref3) {
var dragEl = _ref3.dragEl,

@@ -1062,3 +1054,3 @@ rootEl = _ref3.rootEl,

multiDiffer.from.group = rootEl;
}, 3),
},
_onMultiDrop: function _onMultiDrop(_ref4) {

@@ -1122,25 +1114,2 @@ var fromGroup = _ref4.fromGroup,

/**
* Sortable states
*/
var EventState = /*#__PURE__*/function () {
function EventState() {
_classCallCheck(this, EventState);
this.down = undefined;
this.move = undefined;
}
_createClass(EventState, [{
key: "destroy",
value: function destroy() {
this.down = undefined;
this.move = undefined;
}
}]);
return EventState;
}();
var FromTo = {

@@ -1177,4 +1146,2 @@ sortable: null,

var documentExists = typeof document !== 'undefined';
var supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div');
var sortables = [];

@@ -1185,2 +1152,4 @@ var rootEl,

ghostEl,
downEvent,
moveEvent,
isMultiple,

@@ -1192,6 +1161,3 @@ fromGroup,

// timer for start to drag
autoScrollTimer,
differ = new Difference(),
// Record the difference before and after
eventState = new EventState(); // Status record during drag and move
differ = new Difference(); // Record the difference before and after

@@ -1247,7 +1213,8 @@ var distance = {

event.target = document.elementFromPoint(clientX, clientY);
event.rootEl = nearest;
rootEl = nearest;
event.preventDefault = void 0;
event.stopPropagation = void 0;
if (rootEl === fromGroup) return;
nearest[expando]._triggerEvent(event);
nearest[expando]._onMove(event);
}

@@ -1297,10 +1264,2 @@ }

var _globalDragOver = function _globalDragOver(evt) {
if (evt.dataTransfer) {
evt.dataTransfer.dropEffect = 'move';
}
evt.cancelable && evt.preventDefault();
};
var _emitDiffer = function _emitDiffer() {

@@ -1349,16 +1308,13 @@ return {

draggable: undefined,
// String: css selector, Function: (e) => return true
// String: css selector, Function: (e) => return (true || HTMLElement)
onDrag: undefined,
// The callback function triggered when dragging starts: () => {}
// The callback function triggered when dragging starts
onMove: undefined,
// The callback function during drag and drop: (from, to) => {}
// The callback function during drag and drop
onDrop: undefined,
// The callback function when the drag is completed: (from, to, changed) => {}
// The callback function when the drag is completed
onChange: undefined,
// The callback function when dragging an element to change its position: (from, to) => {}
// The callback function when dragging an element to change its position
autoScroll: true,
// Auto scrolling when dragging to the edge of the container
scrollStep: 5,
// The distance to scroll each frame
scrollThreshold: 15,
scrollThreshold: 25,
// Autoscroll threshold

@@ -1381,7 +1337,5 @@ delay: 0,

// Appends the cloned DOM Element into the Document's Body
forceFallback: false,
// Ignore HTML5 drag and drop behavior, force callback to proceed
stopPropagation: false,
// Prevents further propagation of the current event in the capture and bubbling phases
supportPointer: 'PointerEvent' in window && !Safari,
supportPointer: 'onpointerdown' in window && !Safari,
supportTouch: 'ontouchstart' in window,

@@ -1395,4 +1349,2 @@ emptyInsertThreshold: 5

this.nativeDraggable = this.options.forceFallback ? false : supportDraggable;
_prepareGroup(options); // Bind all private methods

@@ -1420,3 +1372,8 @@

sortables.push(el);
Object.assign(this, Animation(), AutoScroll(), Multiple());
Object.assign(this, Animation());
this._autoScroll = new AutoScroll();
if (this.options.multiple) {
Object.assign(this, Multiple());
}
}

@@ -1435,12 +1392,10 @@

this.el[expando] = null;
off(this.el, 'pointerdown', this._onDrag);
off(this.el, 'touchstart', this._onDrag);
off(this.el, 'mousedown', this._onDrag);
this._clearState(); // Remove draggable attributes
for (var i = 0; i < events.start.length; i++) {
off(this.el, events.start[i], this._onDrag);
} // clear status
Array.prototype.forEach.call(this.el.querySelectorAll('[draggable]'), function (el) {
el.removeAttribute('draggable');
});
this._clearState();
clearTimeout(dragStartTimer);

@@ -1456,3 +1411,3 @@ sortables.splice(sortables.indexOf(this.el), 1);

if (dragEl || this.options.disabled || this.options.group.pull === false) return;
if (dragEl || this.options.disabled || !this.options.group.pull) return;
if (/mousedown|pointerdown/.test(evt.type) && evt.button !== 0) return true; // only left button and enabled

@@ -1466,3 +1421,3 @@

if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') return true;
if (Safari && target && target.tagName.toUpperCase() === 'SELECT') return true;
if (target === this.el) return true;

@@ -1474,6 +1429,7 @@ var draggable = this.options.draggable;

var element = draggable(e);
if (!element) return true;
if (isHTMLElement(element)) dragEl = element; // set drag element
if (!element) return true; // set drag element
if (isHTMLElement(element)) dragEl = element;
} else if (typeof draggable === 'string') {
// String use as 'tag' or '.class' or '#id'
// String use as 'TagName' or '.class' or '#id'
if (!matches(target, draggable)) return true;

@@ -1492,3 +1448,3 @@ } else if (draggable) {

fromSortable = this;
isMultiple = this._allowMultiDrag(dragEl); // multi-drag
isMultiple = this.options.multiple && this._allowMultiDrag(dragEl); // multi-drag

@@ -1512,8 +1468,6 @@ if (isMultiple) this._onMultiDrag(); // get the position of the dragged element in the list

};
eventState.down = e; // sortable state down is active
downEvent = e; // sortable state down is active
// enable drag between groups
if (this.nativeDraggable) {
on(this.ownerDocument, 'dragover', _nearestSortable);
} else if (this.options.supportPointer) {
if (this.options.supportPointer) {
on(this.ownerDocument, 'pointermove', _nearestSortable);

@@ -1524,8 +1478,4 @@ } else if (touch) {

on(this.ownerDocument, 'mousemove', _nearestSortable);
} // Solve the problem that `dragend` does not take effect when the `dragover` event is not triggered
}
on(this.ownerDocument, 'pointerup', this._onDrop);
on(this.ownerDocument, 'touchend', this._onDrop);
on(this.ownerDocument, 'mouseup', this._onDrop);
var _this$options2 = this.options,

@@ -1535,3 +1485,3 @@ delay = _this$options2.delay,

if (delay && (!delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {
if (delay && (!delayOnTouchOnly || touch) && !(Edge || IE11OrLess)) {
clearTimeout(dragStartTimer); // delay to start

@@ -1552,17 +1502,13 @@

if (!this.nativeDraggable || touch) {
if (this.options.supportPointer) {
on(this.ownerDocument, 'pointermove', this._onMove);
} else if (touch) {
on(this.ownerDocument, 'touchmove', this._onMove);
} else {
on(this.ownerDocument, 'mousemove', this._onMove);
}
if (this.options.supportPointer) {
on(this.ownerDocument, 'pointermove', this._onMove);
on(this.ownerDocument, 'pointerup', this._onDrop);
on(this.ownerDocument, 'pointercancel', this._onDrop);
} else if (touch) {
on(this.ownerDocument, 'touchmove', this._onMove);
on(this.ownerDocument, 'touchend', this._onDrop);
on(this.ownerDocument, 'touchcancel', this._onDrop);
} else {
// allow HTML5 drag event
dragEl.draggable = true;
on(this.el, 'dragstart', this._onDragStart);
on(this.ownerDocument, 'mousemove', this._onMove);
on(this.ownerDocument, 'mouseup', this._onDrop);
} // clear selection

@@ -1582,28 +1528,31 @@

},
// -------------------------------- drag event ----------------------------------
_onDragStart: function _onDragStart(evt) {
this._appendGhost();
// -------------------------------- real started ----------------------------------
_onTrulyStarted: function _onTrulyStarted(e,
/** originalEvent */
evt) {
if (!moveEvent) {
// on-multi-drag
if (isMultiple) {
this._onMultiStarted(_params({
e: e,
evt: evt
}));
} else {
// on-drag
this._dispatchEvent('onDrag', _objectSpread2(_objectSpread2({}, _emitDiffer()), {}, {
event: e,
originalEvent: evt
}));
} // Init in the move event to prevent conflict with the click event
var dataTransfer = evt.dataTransfer;
if (dataTransfer) {
// elements can only be dragged after firefox sets setData
dataTransfer.setData('text', ''); // set ghost element
this._appendGhost(); // add class for drag element
dataTransfer.setDragImage(ghostEl, distance.x, distance.y);
dataTransfer.effectAllowed = 'move';
toggleClass(dragEl, this.options.chosenClass, true);
dragEl.style['will-change'] = 'transform';
if (Safari) css(document.body, 'user-select', 'none');
}
},
// -------------------------------- trigger ----------------------------------
_triggerEvent: function _triggerEvent(evt) {
rootEl = evt.rootEl;
if (this.nativeDraggable) {
on(this.el, 'dragover', _globalDragOver);
on(this.el, 'dragend', this._onDrop);
this._onDragOver(evt);
} else {
this._onMove(evt);
}
moveEvent = e; // sortable state move is active
},

@@ -1614,70 +1563,43 @@ // -------------------------------- move ----------------------------------

evt) {
var _this2 = this;
this._preventEvent(evt);
if (!eventState.down || !dragEl) return;
if (!downEvent || !dragEl) return;
if (!_positionChanged(evt)) return;
this._preventEvent(evt);
var _getEvent2 = getEvent(evt),
e = _getEvent2.e,
target = _getEvent2.target;
target = _getEvent2.target; // truly started
this._onStarted(e, evt);
if (evt.rootEl) {
if (isMultiple) {
// on-multi-move
this._onMultiMove(_params({
e: e,
evt: evt
}));
} else {
// on-move
this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, _emitDiffer()), {}, {
ghostEl: ghostEl,
event: e,
originalEvent: evt
}));
} // check if element will exchange
this._onTrulyStarted(e, evt);
var x = evt.clientX - downEvent.clientX;
var y = evt.clientY - downEvent.clientY;
setTransition(ghostEl, 'none');
setTransform(ghostEl, "translate3d(".concat(x, "px, ").concat(y, "px, 0)"));
if (this._allowPut()) this._triggerChangeEvent(target, e, evt); // auto scroll
if (isMultiple) {
// on-multi-move
this._onMultiMove(_params({
e: e,
evt: evt
}));
} else {
// on-move
this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, _emitDiffer()), {}, {
ghostEl: ghostEl,
event: e,
originalEvent: evt
}));
} // check if element will exchange
clearTimeout(autoScrollTimer);
if (this.options.autoScroll) {
autoScrollTimer = setTimeout(function () {
return _this2._autoScroll(_this2, eventState);
}, 0);
}
}
},
_onDragOver: function _onDragOver(evt) {
if (!eventState.down || !dragEl) return;
if (this._allowPut()) this._triggerChangeEvent(target, e, evt); // auto scroll
this._preventEvent(evt);
var _this$options3 = this.options,
autoScroll = _this$options3.autoScroll,
scrollThreshold = _this$options3.scrollThreshold;
var allowPut = this._allowPut();
if (evt.dataTransfer) evt.dataTransfer.dropEffect = allowPut ? 'move' : 'none'; // truly started
this._onStarted(evt, evt);
if (evt.rootEl && _positionChanged(evt)) {
if (isMultiple) {
// on-multi-move
this._onMultiMove(_params({
e: evt,
evt: evt
}));
} else {
// on-move
this._dispatchEvent('onMove', _objectSpread2(_objectSpread2({}, _emitDiffer()), {}, {
ghostEl: ghostEl,
event: evt,
originalEvent: evt
}));
}
if (allowPut) this._triggerChangeEvent(evt.target, evt, evt);
if (autoScroll) {
this._autoScroll.update(this.el, scrollThreshold, downEvent, moveEvent);
}

@@ -1695,49 +1617,10 @@ },

},
// -------------------------------- real started ----------------------------------
_onStarted: function _onStarted(e,
/** originalEvent */
evt) {
if (!eventState.move) {
// on-multi-drag
if (isMultiple) {
this._onMultiStarted(_params({
e: e,
evt: evt
}));
} else {
// on-drag
this._dispatchEvent('onDrag', _objectSpread2(_objectSpread2({}, _emitDiffer()), {}, {
event: e,
originalEvent: evt
}));
} // Init in the move event to prevent conflict with the click event
if (!this.nativeDraggable) this._appendGhost(); // add class for drag element
toggleClass(dragEl, this.options.chosenClass, true);
dragEl.style['will-change'] = 'transform';
if (this.nativeDraggable) this._unbindDropEvents();
if (Safari) css(document.body, 'user-select', 'none');
}
eventState.move = e; // sortable state move is active
var _eventState$down = eventState.down,
clientX = _eventState$down.clientX,
clientY = _eventState$down.clientY;
if (!this.nativeDraggable) {
setTransition(ghostEl, 'none');
setTransform(ghostEl, "translate3d(".concat(e.clientX - clientX, "px, ").concat(e.clientY - clientY, "px, 0)"));
}
},
// -------------------------------- ghost ----------------------------------
_appendGhost: function _appendGhost() {
if (ghostEl) return;
var _this$options3 = this.options,
fallbackOnBody = _this$options3.fallbackOnBody,
ghostClass = _this$options3.ghostClass,
_this$options3$ghostS = _this$options3.ghostStyle,
ghostStyle = _this$options3$ghostS === void 0 ? {} : _this$options3$ghostS;
var _this$options4 = this.options,
fallbackOnBody = _this$options4.fallbackOnBody,
ghostClass = _this$options4.ghostClass,
_this$options4$ghostS = _this$options4.ghostStyle,
ghostStyle = _this$options4$ghostS === void 0 ? {} : _this$options4$ghostS;
var container = fallbackOnBody ? document.body : this.el;

@@ -1768,8 +1651,2 @@ var rect = getRect(dragEl, {

css(ghostEl, key, ghostStyle[key]);
} // hide ghostEl when use drag event
if (this.nativeDraggable) {
css(ghostEl, 'top', '-999px');
css(ghostEl, 'zIndex', '-100000');
}

@@ -1801,3 +1678,3 @@

},
_onChange: debounce(function (target, e, evt) {
_onChange: function _onChange(target, e, evt) {
if (!differ.from.group) return;

@@ -1896,3 +1773,3 @@

differ.from.group = rootEl;
}, 3),
},
// -------------------------------- on drop ----------------------------------

@@ -1902,4 +1779,2 @@ _onDrop: function _onDrop(

evt) {
this._unbindDragEvents();
this._unbindMoveEvents();

@@ -1911,5 +1786,6 @@

clearTimeout(dragStartTimer);
clearTimeout(autoScrollTimer); // clear style, attrs and class
this._autoScroll.clear();
clearTimeout(dragStartTimer); // clear style, attrs and class
if (dragEl) {

@@ -1920,3 +1796,2 @@ var _getEvent3 = getEvent(evt),

toggleClass(dragEl, this.options.chosenClass, false);
if (this.nativeDraggable) dragEl.draggable = false;
if (touch) dragEl.style['touch-action'] = '';

@@ -1927,3 +1802,3 @@ dragEl.style['will-change'] = '';

if (dragEl && eventState.down && eventState.move) {
if (dragEl && downEvent && moveEvent) {
if (isMultiple) {

@@ -1960,3 +1835,3 @@ this._onMultiDrop(_params({

if (Safari) css(document.body, 'user-select', '');
} else {
} else if (this.options.multiple) {
// click event

@@ -1980,3 +1855,3 @@ this._setMultiElements(evt, this.el);

ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);
dragEl = dropEl = ghostEl = isMultiple = fromGroup = activeGroup = fromSortable = dragStartTimer = autoScrollTimer = Sortable.ghost = null;
dragEl = dropEl = ghostEl = downEvent = moveEvent = isMultiple = fromGroup = activeGroup = fromSortable = dragStartTimer = Sortable.ghost = null;
distance = lastPosition = {

@@ -1986,27 +1861,14 @@ x: 0,

};
eventState.destroy();
differ.destroy();
},
_unbindDragEvents: function _unbindDragEvents() {
if (this.nativeDraggable) {
off(this.el, 'dragstart', this._onDragStart);
off(this.el, 'dragover', _globalDragOver);
off(this.el, 'dragend', this._onDrop);
_unbindMoveEvents: function _unbindMoveEvents() {
for (var i = 0; i < events.move.length; i++) {
off(this.ownerDocument, events.move[i], this._onMove);
off(this.ownerDocument, events.move[i], _nearestSortable);
}
},
_unbindMoveEvents: function _unbindMoveEvents() {
off(this.ownerDocument, 'pointermove', this._onMove);
off(this.ownerDocument, 'touchmove', this._onMove);
off(this.ownerDocument, 'mousemove', this._onMove);
off(this.ownerDocument, 'pointermove', _nearestSortable);
off(this.ownerDocument, 'touchmove', _nearestSortable);
off(this.ownerDocument, 'mousemove', _nearestSortable);
off(this.ownerDocument, 'dragover', _nearestSortable);
},
_unbindDropEvents: function _unbindDropEvents() {
off(this.ownerDocument, 'pointerup', this._onDrop);
off(this.ownerDocument, 'pointercancel', this._onDrop);
off(this.ownerDocument, 'touchend', this._onDrop);
off(this.ownerDocument, 'touchcancel', this._onDrop);
off(this.ownerDocument, 'mouseup', this._onDrop);
for (var i = 0; i < events.end.length; i++) {
off(this.ownerDocument, events.end[i], this._onDrop);
}
}

@@ -2016,5 +1878,3 @@ };

getRect: getRect,
getOffset: getOffset,
debounce: debounce,
throttle: throttle
getOffset: getOffset
};

@@ -2021,0 +1881,0 @@

2

dist/sortable.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function X(e,t){var o,n=Object.keys(e);return Object.getOwnPropertySymbols&&(o=Object.getOwnPropertySymbols(e),t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)),n}function h(n){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?X(Object(i),!0).forEach(function(t){var e,o;e=n,o=i[t=t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(i)):X(Object(i)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(i,t))})}return n}function Y(t){return(Y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function L(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function R(t,e,o){e&&L(t.prototype,e),o&&L(t,o),Object.defineProperty(t,"prototype",{writable:!1})}function W(t){return function(t){if(Array.isArray(t))return H(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return H(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(o="Object"===o&&t.constructor?t.constructor.name:o)||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?H(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function H(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}var G,F={capture:!1,passive:!1},z=/\s+/g,q=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],V=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],U=(G=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return G=!0}}),G);function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var d=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),Z=t(/Edge/i),s=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),$=t(/iP(ad|od|hone)/i),J=t(/chrome/i)&&t(/android/i);function K(e){if(e){var t=document.createElement("div");try{return t.appendChild(e.cloneNode(!0)),1==e.nodeType}catch(t){return e==window||e==document}}}function r(e,o){o?"none"===o?q.forEach(function(t){return b(e,t,"none")}):q.forEach(function(t){return b(e,t,"".concat(t.split("transition")[0],"transform ").concat(o))}):q.forEach(function(t){return b(e,t,"")})}function a(e,o){o?V.forEach(function(t){return b(e,t,"".concat(t.split("transform")[0]).concat(o))}):V.forEach(function(t){return b(e,t,"")})}function Q(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,t=e||t;return{touch:e,e:t,target:e?document.elementFromPoint(t.clientX,t.clientY):t.target}}function l(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!U&&d)&&F):window.attachEvent&&t.attachEvent("on"+e,o)}function e(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!U&&d)&&F):window.detachEvent&&t.detachEvent("on"+e,o)}function p(t){for(var e={top:0,left:0,height:0,width:0},o=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==o;)e.top+=o.offsetTop,e.left+=o.offsetLeft,o=o.offsetParent;return e}function m(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function g(t){var e,o,n,i,r,a,s,l=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=2<arguments.length?arguments[2]:void 0;if(t.getBoundingClientRect||t===window){if(t!==window&&t.parentNode&&t!==m()){if(o=(e=t.getBoundingClientRect()).top,n=e.left,i=e.bottom,r=e.right,a=e.height,s=e.width,l.parent&&t.parentNode!==t.ownerDocument.body)for(var u,f=t.parentNode;f&&f.getBoundingClientRect&&f!==t.ownerDocument.body;){if((u=f.getBoundingClientRect()).height<a)return o=u.top,n=u.left,i=u.bottom,r=u.right,a=u.height,{top:o,left:n,bottom:i,right:r,width:s=u.width,height:a};f=f.parentNode}}else n=o=0,i=window.innerHeight,r=window.innerWidth,a=window.innerHeight,s=window.innerWidth;if((l.block||l.relative)&&t!==window&&(c=c||t.parentNode,!d))do{if(c&&c.getBoundingClientRect&&("none"!==b(c,"transform")||l.relative&&"static"!==b(c,"position"))){var h=c.getBoundingClientRect();o-=h.top+parseInt(b(c,"border-top-width")),n-=h.left+parseInt(b(c,"border-left-width")),i=o+e.height,r=n+e.width;break}}while(c=c.parentNode);return{top:o,left:n,bottom:i,right:r,width:s,height:a}}}function v(t,e,o){var n=W(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:g(n[t]),offset:p(n[t])};for(var i=0;i<n.length;i++)if(function(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return 1;o=o.parentNode}return}(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:g(n[i]),offset:p(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function tt(t,e){for(var o=t.lastElementChild;o&&(o===I.ghost||"none"===b(o,"display")||e&&!et(o,e));)o=o.previousElementSibling;return o}function c(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(z," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(z," ")))}function et(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}function ot(t,e){return t.top!==e.top||t.left!==e.left}function b(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return document.defaultView&&document.defaultView.getComputedStyle?o=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];n[e=e in n||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=o+("string"==typeof o?"":"px")}}function nt(o,n,i){var r=null;return function(){var t=this,e=arguments;r&&clearTimeout(r),i&&!r&&o.apply(t,e),r=setTimeout(function(){o.apply(t,e)},n)}}function it(o,n){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,o.apply(t,e)},n)}}var u="Sortable"+Date.now();function rt(){var i=[];return{_captureAnimationState:function(t,e){var o=W(Array.from(this.el.children)),e=(t=t,e=e,t=(n=o).indexOf(t),n=n.indexOf(e),t<n?{start:t,end:n}:{start:n,end:t}),n=e.start,t=e.end;n<(i.length=0)&&(n=t,t=Math.min(o.length-1,100)),t<0&&(t=Math.min(o.length-1,100)),o.slice(n,t+1).forEach(function(t){i.push({target:t,rect:g(t)})})},_animate:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o._excuteAnimation(e,t,o.options.animation)})},_excuteAnimation:function(t,e){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=g(t),i=e.left-n.left,e=e.top-n.top;r(t,"none"),a(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetWidth,r(t,"".concat(o,"ms")),a(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){r(t,""),a(t,""),t.animated=null},o)}}}var o={sortable:null,group:null,nodes:[]},y=[],w=new(function(){function t(){i(this,t),this.from=h({},o),this.to=h({},o)}return R(t,[{key:"destroy",value:function(){this.from=h({},o),this.to=h({},o)}}]),t}()),E=function(){return{from:h({},w.from),to:h({},w.to)}},at=function(t,o){return!!t.find(function(e){return ot(o.find(function(t){return t.node===e.node}).offset,e.offset)})};function st(){return{_setMultiElements:function(t,e){var o=this;if(this.options.multiple){var n,i=this.options.draggable;if("function"==typeof i){var i=i(t);if(!i)return;K(i)&&(n=i)}(n=n||v(this.el,t.target,!0))&&(c(n,this.options.selectedClass,!~y.indexOf(n)),i={sortable:this,group:e,target:n,event:t,originalEvent:t},~y.indexOf(n)?(y.splice(y.indexOf(n),1),this._dispatchEvent("onDeselect",i)):(y.push(n),this._dispatchEvent("onSelect",i)),y.forEach(function(t){var e;t.sortableIndex=(e=o.el,(t=t)&&t.parentNode?W(Array.from(e.children)).indexOf(t):-1)}),y.sort(function(t,e){return t.sortableIndex-e.sortableIndex}))}},_allowMultiDrag:function(t){return this.options.multiple&&y.length&&y.includes(t)},_getMultiGhostElement:function(){var n=document.createElement("div");return y.forEach(function(t,e){var t=t.cloneNode(!0),o=4*e+4;t.style="opacity: ".concat(0===e?1:.5,";position: absolute;z-index: ").concat(e,";bottom: -").concat(o,"px;right: -").concat(o,"px;width: 100%;height: 100%;"),n.appendChild(t)}),n},_setMultiDiffer:function(t){w[t]={sortable:this,group:this.el,nodes:y.map(function(t){return{node:t,rect:g(t),offset:p(t)}})}},_onMultiDrag:function(){this._setMultiDiffer("from")},_onMultiStarted:function(t){var e=t.e,o=t.evt,n=t.dragEl,i=(this._dispatchEvent("onDrag",h(h({},E()),{},{event:e,originalEvent:o})),this._captureAnimationState(n),y.forEach(function(t){t!==n&&b(t,"position","absolute")}),g(n,{relative:!0}));y.forEach(function(t){var e,o;t!==n&&(o=i,b(e=t,"position","absolute"),b(e,"top",o.top),b(e,"left",o.left),b(t,"display","none"))}),this._animate()},_onMultiMove:function(t){var e=t.e,o=t.evt,n=t.dragEl,t=t.ghostEl,i=(this._dispatchEvent("onMove",h(h({},E()),{},{ghostEl:t,event:e,originalEvent:o})),(t=e).pageX||t.pageY?{top:t.pageY,left:t.pageX}:t.clientX||t.clientY?{top:t.clientY+document.documentElement.scrollTop+document.body.scrollTop,left:t.clientX+document.documentElement.scrollLeft+document.body.scrollLeft}:void 0);y.forEach(function(t){t!==n&&(b(t,"top",i.top),b(t,"left",i.left))})},_onMultiChange:nt(function(t){var e=t.dragEl,o=t.rootEl,n=t.target,i=t.e,t=t.evt;if(w.from.group){if(!tt(o)||n===o&&w.from.group!==o)w.from.sortable._captureAnimationState(e,e),y.forEach(function(t){o.appendChild(t)}),this._setMultiDiffer("to"),w.from.sortable._dispatchEvent("onRemove",h(h({},E()),{},{event:i,originalEvent:t})),this._dispatchEvent("onAdd",h(h({},E()),{},{event:i,originalEvent:t})),w.from.sortable._animate();else{var n=v(o,n),r=n.el,a=n.rect,n=n.offset;if(!r||r.animated||r===e)return;this._setMultiDiffer("to");var s=i.clientX,l=i.clientY,c=a.left,u=a.right,f=a.top,a=a.bottom;c<s&&s<u&&f<l&&l<a&&(this._captureAnimationState(e,r),w.from.group!==w.to.group?(w.from.sortable._captureAnimationState(e,r),y.forEach(function(t){o.insertBefore(t,r)}),w.from.sortable._dispatchEvent("onRemove",h(h({},E()),{},{event:i,originalEvent:t})),this._dispatchEvent("onAdd",h(h({},E()),{},{event:i,originalEvent:t})),w.from.sortable._animate()):((c=p(e)).top<n.top||c.left<n.left?y.forEach(function(t){o.insertBefore(t,r.nextSibling)}):y.forEach(function(t){o.insertBefore(t,r)}),this._dispatchEvent("onChange",h(h({},E()),{},{event:i,originalEvent:t}))),this._animate())}w.from.sortable=this,w.from.group=o}},3),_onMultiDrop:function(t){for(var e,o=t.fromGroup,n=t.fromSortable,i=t.dragEl,r=t.rootEl,t=t.evt,a=(this._captureAnimationState(i),y.forEach(function(t){t!==i&&(b(t=t,"display",""),b(t,"position",""),b(t,"top",""),b(t,"left",""))}),y.indexOf(i)),s=0;s<y.length;s++)s<a?r.insertBefore(y[s],i):(e=0<s?y[s-1]:i,r.insertBefore(y[s],e.nextSibling));w.to.nodes=y.map(function(t){return{node:t,rect:g(t),offset:p(t)}}),w.to.group||(w.to.group=this.el,w.to.sortable=this),w.from.group=o,w.from.sortable=n;var l=at(w.from.nodes,w.to.nodes),l=h(h({},E()),{},{changed:l,event:t,originalEvent:t});w.to.group!==o&&n._dispatchEvent("onDrop",l),this._dispatchEvent("onDrop",l),this._animate()}}}function f(t){if(x){var e=t=t.touches?t.touches[0]:t,o=e.clientX,e=e.clientY,n=lt(o,e);if(n){var i,r={};for(i in t)r[i]=t[i];r.target=document.elementFromPoint(o,e),r.rootEl=n,r.preventDefault=void 0,r.stopPropagation=void 0,n[u]._triggerEvent(r)}}}function lt(i,r){var a;return mt.some(function(t){var e,o,n=t[u].options.emptyInsertThreshold;if(n)return o=g(t,{parent:!0}),e=i>=o.left-n&&i<=o.right+n,o=r>=o.top-n&&r<=o.bottom+n,e&&o?a=t:void 0}),a}function ct(t){t.dataTransfer&&(t.dataTransfer.dropEffect="move"),t.cancelable&&t.preventDefault()}function _(){return{from:h({},j.from),to:h({},j.to)}}function D(t){return h(h({},t),{},{rootEl:S,dragEl:x,ghostEl:T,fromSortable:A,fromGroup:C,activeGroup:n})}var S,x,M,T,O,C,n,A,P,ut,ft=function(){function t(){i(this,t),this.down=void 0,this.move=void 0}return R(t,[{key:"destroy",value:function(){this.down=void 0,this.move=void 0}}]),t}(),ht={sortable:null,group:null,node:null,rect:{},offset:{}},dt=function(){function t(){i(this,t),this.from=h({},ht),this.to=h({},ht)}return R(t,[{key:"destroy",value:function(){this.from=h({},ht),this.to=h({},ht)}}]),t}(),pt="undefined"!=typeof document&&!J&&!$&&"draggable"in document.createElement("div"),mt=[],j=new dt,k=new ft,B={x:0,y:0},N={x:0,y:0};function I(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[u]=this).el=t,this.scrollEl=function(t,e){if(!t||!t.getBoundingClientRect)return m();var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=b(o);if(o.clientWidth<o.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||o.clientHeight<o.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!o.getBoundingClientRect||o===document.body)return m();if(n||e)return o;n=!0}}}while(o=o.parentNode);return m()}(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n,i={group:"",animation:150,multiple:!1,draggable:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,disabled:!1,ghostClass:"",ghostStyle:{},chosenClass:"",selectedClass:"",fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!s,supportTouch:"ontouchstart"in window,emptyInsertThreshold:5};for(o in i)o in this.options||(this.options[o]=i[o]);for(n in this.nativeDraggable=!this.options.forceFallback&&pt,a={},(r=(e=e).group)&&"object"==Y(r)||(r={name:r,pull:!0,put:!0}),a.name=r.name,a.pull=r.pull,a.put=r.put,e.group=a,this)"_"===n.charAt(0)&&"function"==typeof this[n]&&(this[n]=this[n].bind(this));var r=this.options,e=r.supportPointer,a=r.supportTouch;l(t,e?"pointerdown":a?"touchstart":"mousedown",this._onDrag),mt.push(t),Object.assign(this,rt(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:it(function(t,e){var o,n,i,r,a,s,l,c,u,f,h,d,p,m,v;t.scrollEl&&e.down&&e.move&&(o=(n=e.move).clientX,n=n.clientY,void 0!==o&&void 0!==n&&t.scrollEl!==t.ownerDocument&&(i=(m=t.scrollEl).scrollTop,r=m.scrollLeft,a=m.scrollHeight,m=m.scrollWidth,s=(p=g(t.scrollEl)).top,h=p.right,l=p.bottom,d=p.left,c=p.height,p=p.width,u=(f=t.options).scrollStep,f=f.scrollThreshold,d=0<r&&d<=o&&o<=d+f,p=r+p<m&&o<=h&&h-f<=o,m=i+c<a&&n<=l&&l-f<=n,v={x:r,y:i},(h=0<i&&s<=n&&n<=s+f)?(v.x=d?r-u:p?r+u:r,v.y=i-u):m?(v.x=d?r-u:p?r+u:r,v.y=i+u):d?(v.x=r-u,v.y=i):p&&(v.x=r+u,v.y=i),(h||d||p||m)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(v.x,v.y),t._autoScroll(t,e)})))},10)}),st())}return(I.prototype={constructor:I,destroy:function(){this._dispatchEvent("destroy",this),this.el[u]=null,e(this.el,"pointerdown",this._onDrag),e(this.el,"touchstart",this._onDrag),e(this.el,"mousedown",this._onDrag),this._clearState(),Array.prototype.forEach.call(this.el.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")}),clearTimeout(P),mt.splice(mt.indexOf(this.el),1),this.el=null},_onDrag:function(t){var e=this;if(!x&&!this.options.disabled&&!1!==this.options.group.pull){if(/mousedown|pointerdown/.test(t.type)&&0!==t.button)return!0;var t=Q(t),o=t.touch,n=t.e,t=t.target;if(!this.nativeDraggable&&s&&t&&"SELECT"===t.tagName.toUpperCase())return!0;if(t===this.el)return!0;var i=this.options.draggable;if("function"==typeof i){var r=i(n);if(!r)return!0;K(r)&&(x=r)}else if("string"==typeof i){if(!et(t,i))return!0}else if(i)throw new Error('draggable expected "function" or "string" but received "'.concat(Y(i),'"'));if(!(x=x||v(this.el,t,!0))||x.animated)return!0;o&&(x.style["touch-action"]="none"),C=this.el,(O=(A=this)._allowMultiDrag(x))&&this._onMultiDrag();r=v(this.el,x),i=r.rect,t=r.offset,r=(j.from={sortable:this,group:this.el,node:x,rect:i,offset:t},B={x:n.clientX-i.left,y:n.clientY-i.top},k.down=n,this.nativeDraggable?l(this.ownerDocument,"dragover",f):this.options.supportPointer?l(this.ownerDocument,"pointermove",f):l(this.ownerDocument,o?"touchmove":"mousemove",f),l(this.ownerDocument,"pointerup",this._onDrop),l(this.ownerDocument,"touchend",this._onDrop),l(this.ownerDocument,"mouseup",this._onDrop),this.options),t=r.delay,i=r.delayOnTouchOnly;!t||i&&!o||this.nativeDraggable&&(Z||d)?this._onStart(n,o):(clearTimeout(P),P=setTimeout(function(){return e._onStart(n,o)},t))}},_onStart:function(t,e){S=this.el,n=this.options.group,!this.nativeDraggable||e?(this.options.supportPointer?l(this.ownerDocument,"pointermove",this._onMove):l(this.ownerDocument,e?"touchmove":"mousemove",this._onMove),l(this.ownerDocument,"pointercancel",this._onDrop),l(this.ownerDocument,"touchcancel",this._onDrop)):(x.draggable=!0,l(this.el,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onDragStart:function(t){this._appendGhost();t=t.dataTransfer;t&&(t.setData("text",""),t.setDragImage(T,B.x,B.y),t.effectAllowed="move")},_triggerEvent:function(t){S=t.rootEl,this.nativeDraggable?(l(this.el,"dragover",ct),l(this.el,"dragend",this._onDrop),this._onDragOver(t)):this._onMove(t)},_onMove:function(t){var e,o,n=this;k.down&&x&&(this._preventEvent(t),e=(o=Q(t)).e,o=o.target,this._onStarted(e,t),t.rootEl&&(O?this._onMultiMove(D({e:e,evt:t})):this._dispatchEvent("onMove",h(h({},_()),{},{ghostEl:T,event:e,originalEvent:t})),this._allowPut()&&this._triggerChangeEvent(o,e,t),clearTimeout(ut),this.options.autoScroll&&(ut=setTimeout(function(){return n._autoScroll(n,k)},0))))},_onDragOver:function(t){var e,o,n,i,r;k.down&&x&&(this._preventEvent(t),e=this._allowPut(),t.dataTransfer&&(t.dataTransfer.dropEffect=e?"move":"none"),this._onStarted(t,t),!t.rootEl||(n=(o=t).clientX,o=o.clientY,i=n-N.x,r=o-N.y,N.x=n,N.y=o,void 0!==n&&void 0!==o&&Math.abs(i)<=0&&Math.abs(r)<=0)||(O?this._onMultiMove(D({e:t,evt:t})):this._dispatchEvent("onMove",h(h({},_()),{},{ghostEl:T,event:t,originalEvent:t})),e&&this._triggerChangeEvent(t.target,t,t)))},_allowPut:function(){var t;return C===this.el||!!this.options.group.put&&(t=this.options.group.name,n.name&&t&&n.name===t)},_onStarted:function(t,e){k.move||(O?this._onMultiStarted(D({e:t,evt:e})):this._dispatchEvent("onDrag",h(h({},_()),{},{event:t,originalEvent:e})),this.nativeDraggable||this._appendGhost(),c(x,this.options.chosenClass,!0),x.style["will-change"]="transform",this.nativeDraggable&&this._unbindDropEvents(),s&&b(document.body,"user-select","none")),k.move=t;var e=k.down,o=e.clientX,e=e.clientY;this.nativeDraggable||(r(T,"none"),a(T,"translate3d(".concat(t.clientX-o,"px, ").concat(t.clientY-e,"px, 0)")))},_appendGhost:function(){if(!T){var t,e=this.options,o=e.fallbackOnBody,n=e.ghostClass,e=e.ghostStyle,i=void 0===e?{}:e,e=o?document.body:this.el,o=g(x,{block:!0},e);for(t in c(T=O?this._getMultiGhostElement():x.cloneNode(!0),n,!0),b(T,"box-sizing","border-box"),b(T,"margin",0),b(T,"top",o.top),b(T,"left",o.left),b(T,"width",o.width),b(T,"height",o.height),b(T,"opacity","0.8"),b(T,"position","fixed"),b(T,"zIndex","100000"),b(T,"pointerEvents","none"),i)b(T,t,i[t]);this.nativeDraggable&&(b(T,"top","-999px"),b(T,"zIndex","-100000")),r(T,"none"),a(T,"translate3d(0px, 0px, 0px)"),e.appendChild(T);n=B.x/parseInt(T.style.width)*100,o=B.y/parseInt(T.style.height)*100;b(T,"transform-origin","".concat(n,"% ").concat(o,"%")),b(T,"transform","translateZ(0)"),I.ghost=T}},_triggerChangeEvent:function(t,e,o){x&&(O?this._onMultiChange(D({target:t,e:e,evt:o})):this._onChange(t,e,o))},_onChange:nt(function(t,e,o){if(j.from.group){if(!tt(S)||t===S&&j.from.group!==S)j.from.sortable._captureAnimationState(x,x),j.to={sortable:this,group:S,node:x,rect:g(x),offset:p(x)},j.from.sortable._dispatchEvent("onRemove",h(h({},_()),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},_()),{},{event:e,originalEvent:o})),S.appendChild(x),j.from.sortable._animate();else{var t=v(S,t),n=t.el,i=t.rect,t=t.offset;if(!n||n.animated||n===x)return;M=n,j.to={sortable:this,group:S,node:M,rect:i,offset:t};var n=e.clientX,r=e.clientY,a=i.left,s=i.right,l=i.top,i=i.bottom;a<n&&n<s&&l<r&&r<i&&(this._captureAnimationState(x,M),j.from.group!==j.to.group?(j.from.sortable._captureAnimationState(x,M),j.from.sortable._dispatchEvent("onRemove",h(h({},_()),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},_()),{},{event:e,originalEvent:o})),S.insertBefore(x,M),j.from.sortable._animate()):(this._dispatchEvent("onChange",h(h({},_()),{},{event:e,originalEvent:o})),(a=p(x)).top<t.top||a.left<t.left?S.insertBefore(x,M.nextSibling):S.insertBefore(x,M)),this._animate())}j.from.sortable=this,j.from.group=S}},3),_onDrop:function(t){var e;this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this._preventEvent(t),clearTimeout(P),clearTimeout(ut),x&&(e=Q(t).touch,c(x,this.options.chosenClass,!1),this.nativeDraggable&&(x.draggable=!1),e&&(x.style["touch-action"]=""),x.style["will-change"]=""),x&&k.down&&k.move?(O?this._onMultiDrop(D({evt:t})):(j.to.rect=g(x),j.to.offset=p(x),j.to.group||(j.to.group=this.el,j.to.sortable=this),j.from.group=C,j.from.sortable=A,e=ot(j.from.offset,j.to.offset),e=h(h({},_()),{},{changed:e,event:t,originalEvent:t}),j.to.group!==C&&A._dispatchEvent("onDrop",e),this._dispatchEvent("onDrop",e)),s&&b(document.body,"user-select","")):this._setMultiElements(t,this.el),this._clearState()},_preventEvent:function(t){void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation()},_dispatchEvent:function(t,e){t=this.options[t];"function"==typeof t&&t(e)},_clearState:function(){T&&T.parentNode&&T.parentNode.removeChild(T),x=M=T=O=C=n=A=P=ut=I.ghost=null,B=N={x:0,y:0},k.destroy(),j.destroy()},_unbindDragEvents:function(){this.nativeDraggable&&(e(this.el,"dragstart",this._onDragStart),e(this.el,"dragover",ct),e(this.el,"dragend",this._onDrop))},_unbindMoveEvents:function(){e(this.ownerDocument,"pointermove",this._onMove),e(this.ownerDocument,"touchmove",this._onMove),e(this.ownerDocument,"mousemove",this._onMove),e(this.ownerDocument,"pointermove",f),e(this.ownerDocument,"touchmove",f),e(this.ownerDocument,"mousemove",f),e(this.ownerDocument,"dragover",f)},_unbindDropEvents:function(){e(this.ownerDocument,"pointerup",this._onDrop),e(this.ownerDocument,"pointercancel",this._onDrop),e(this.ownerDocument,"touchend",this._onDrop),e(this.ownerDocument,"touchcancel",this._onDrop),e(this.ownerDocument,"mouseup",this._onDrop)}}).utils={getRect:g,getOffset:p,debounce:nt,throttle:it},I});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Sortable=e()}(this,function(){"use strict";function L(e,t){var o,n=Object.keys(e);return Object.getOwnPropertySymbols&&(o=Object.getOwnPropertySymbols(e),t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)),n}function h(n){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?L(Object(i),!0).forEach(function(t){var e,o;e=n,o=i[t=t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(i)):L(Object(i)).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(i,t))})}return n}function F(t){return(F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function X(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function Y(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function I(t,e,o){e&&Y(t.prototype,e),o&&Y(t,o),Object.defineProperty(t,"prototype",{writable:!1})}function R(t){return function(t){if(Array.isArray(t))return W(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return W(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(o="Object"===o&&t.constructor?t.constructor.name:o)||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?W(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function W(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=new Array(e);o<e;o++)n[o]=t[o];return n}var H,G={capture:!1,passive:!1},z=/\s+/g,e={start:["pointerdown","touchstart","mousedown"],move:["pointermove","touchmove","mousemove"],end:["pointerup","pointercancel","touchend","touchcancel","mouseup"]},q=(H=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return H=!0}}),H);function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var p=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),U=t(/Edge/i),s=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),V=function(){if("undefined"==typeof window||"undefined"==typeof document)return"";var t=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],t=(Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/)||""===t.OLink&&["","o"])[1];return"ms"!==t?t&&t.length?t[0].toUpperCase()+t.substr(1):"":"ms"}();function Z(e){if(e){var t=document.createElement("div");try{return t.appendChild(e.cloneNode(!0)),1==e.nodeType}catch(t){return e==window||e==document}}}function r(t,e){t.style["".concat(V,"Transition")]=e?"none"===e?"none":"".concat(e):""}function a(t,e){t.style["".concat(V,"Transform")]=e?"".concat(e):""}function $(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,t=e||t;return{touch:e,e:t,target:e?document.elementFromPoint(t.clientX,t.clientY):t.target}}function l(t,e,o){window.addEventListener?t.addEventListener(e,o,!(!q&&p)&&G):window.attachEvent&&t.attachEvent("on"+e,o)}function o(t,e,o){window.removeEventListener?t.removeEventListener(e,o,!(!q&&p)&&G):window.detachEvent&&t.detachEvent("on"+e,o)}function d(t){for(var e={top:0,left:0,height:0,width:0},o=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==o;)e.top+=o.offsetTop,e.left+=o.offsetLeft,o=o.offsetParent;return e}function J(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function m(t){var e,o,n,i,r,a,s,l=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=2<arguments.length?arguments[2]:void 0;if(t.getBoundingClientRect||t===window){if(t!==window&&t.parentNode&&t!==J()){if(o=(e=t.getBoundingClientRect()).top,n=e.left,i=e.bottom,r=e.right,a=e.height,s=e.width,l.parent&&t.parentNode!==t.ownerDocument.body)for(var u,f=t.parentNode;f&&f.getBoundingClientRect&&f!==t.ownerDocument.body;){if((u=f.getBoundingClientRect()).height<a)return o=u.top,n=u.left,i=u.bottom,r=u.right,a=u.height,{top:o,left:n,bottom:i,right:r,width:s=u.width,height:a};f=f.parentNode}}else n=o=0,i=window.innerHeight,r=window.innerWidth,a=window.innerHeight,s=window.innerWidth;if((l.block||l.relative)&&t!==window&&(c=c||t.parentNode,!p))do{if(c&&c.getBoundingClientRect&&("none"!==g(c,"transform")||l.relative&&"static"!==g(c,"position"))){var h=c.getBoundingClientRect();o-=h.top+parseInt(g(c,"border-top-width")),n-=h.left+parseInt(g(c,"border-left-width")),i=o+e.height,r=n+e.width;break}}while(c=c.parentNode);return{top:o,left:n,bottom:i,right:r,width:s,height:a}}}function v(t,e,o){var n=R(Array.from(t.children)),t=n.indexOf(e);if(-1<t)return o?n[t]:{index:t,el:n[t],rect:m(n[t]),offset:d(n[t])};for(var i=0;i<n.length;i++)if(function(t,e){var o;if(t&&e)for(o=t.parentNode;o;){if(e===o)return 1;o=o.parentNode}return}(e,n[i]))return o?n[i]:{index:i,el:n[i],rect:m(n[i]),offset:d(n[i])};return o?null:{index:-1,el:null,rect:{},offset:{}}}function K(t,e){for(var o=t.lastElementChild;o&&(o===N.ghost||"none"===g(o,"display")||e&&!Q(o,e));)o=o.previousElementSibling;return o}function c(t,e,o){var n;t&&e&&(t.classList?t.classList[o?"add":"remove"](e):(n=(" "+t.className+" ").replace(z," ").replace(" "+e+" "," "),t.className=(n+(o?" "+e:"")).replace(z," ")))}function Q(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}function tt(t,e){return t.top!==e.top||t.left!==e.left}function g(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return document.defaultView&&document.defaultView.getComputedStyle?o=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];n[e=e in n||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=o+("string"==typeof o?"":"px")}}var u="Sortable"+Date.now(),et=(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),function(){function t(){X(this,t),this.autoScrollAnimationFrame=null,this.speed={x:10,y:10}}return I(t,[{key:"clear",value:function(){null!=this.autoScrollAnimationFrame&&(cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=null)}},{key:"update",value:function(t,e,o,n){var i=this;o&&n&&this.autoScroll(t,e,n),cancelAnimationFrame(this.autoScrollAnimationFrame),this.autoScrollAnimationFrame=requestAnimationFrame(function(){return i.update(t,e,o,n)})}},{key:"autoScroll",value:function(t,e,o){var n,i,r,a,s,l,c,u,f,h,p,d;t&&(n=o.clientX,o=o.clientY,void 0!==n&&void 0!==o&&(f=m(t))&&(p=t.scrollTop,i=t.scrollLeft,r=t.scrollHeight,h=t.scrollWidth,t.clientHeight,t.clientWidth,a=f.top,s=f.right,l=f.bottom,c=f.left,d=f.height,u=0<p&&a<=o&&o<=a+e,f=i+f.width<h&&n<=s&&s-e<=n,h=p+d<r&&o<=l&&l-e<=o,p=(d=p=0)<i&&c<=n&&n<=c+e?Math.floor(Math.max(-1,(n-c)/e-1)*this.speed.x):f?Math.ceil(Math.min(1,(n-s)/e+1)*this.speed.x):0,(d=u?Math.floor(Math.max(-1,(o-a)/e-1)*this.speed.y):h?Math.ceil(Math.min(1,(o-l)/e+1)*this.speed.y):0)&&(t.scrollTop+=d),p&&(t.scrollLeft+=p)))}}]),t}());function ot(){var i=[];return{_captureAnimationState:function(t,e){var o=R(Array.from(this.el.children)),e=(t=t,e=e,t=(n=o).indexOf(t),n=n.indexOf(e),t<n?{start:t,end:n}:{start:n,end:t}),n=e.start,t=e.end;n<(i.length=0)&&(n=t,t=Math.min(o.length-1,100)),t<0&&(t=Math.min(o.length-1,100)),o.slice(n,t+1).forEach(function(t){i.push({target:t,rect:m(t)})})},_animate:function(){var o=this;i.forEach(function(t){var e=t.target,t=t.rect;o._excuteAnimation(e,t,o.options.animation)})},_excuteAnimation:function(t,e){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,n=m(t),i=e.left-n.left,e=e.top-n.top;r(t,"none"),a(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetWidth,r(t,"".concat(o,"ms")),a(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){r(t,""),a(t,""),t.animated=null},o)}}}var n={sortable:null,group:null,nodes:[]},b=[],y=new(function(){function t(){X(this,t),this.from=h({},n),this.to=h({},n)}return I(t,[{key:"destroy",value:function(){this.from=h({},n),this.to=h({},n)}}]),t}()),w=function(){return{from:h({},y.from),to:h({},y.to)}},nt=function(t,o){return!!t.find(function(e){return tt(o.find(function(t){return t.node===e.node}).offset,e.offset)})};function it(){return{_setMultiElements:function(t,e){var o=this;if(this.options.multiple){var n,i=this.options.draggable;if("function"==typeof i){var i=i(t);if(!i)return;Z(i)&&(n=i)}(n=n||v(this.el,t.target,!0))&&(c(n,this.options.selectedClass,!~b.indexOf(n)),i={sortable:this,group:e,target:n,event:t,originalEvent:t},~b.indexOf(n)?(b.splice(b.indexOf(n),1),this._dispatchEvent("onDeselect",i)):(b.push(n),this._dispatchEvent("onSelect",i)),b.forEach(function(t){var e;t.sortableIndex=(e=o.el,(t=t)&&t.parentNode?R(Array.from(e.children)).indexOf(t):-1)}),b.sort(function(t,e){return t.sortableIndex-e.sortableIndex}))}},_allowMultiDrag:function(t){return this.options.multiple&&b.length&&b.includes(t)},_getMultiGhostElement:function(){var n=document.createElement("div");return b.forEach(function(t,e){var t=t.cloneNode(!0),o=4*e+4;t.style="opacity: ".concat(0===e?1:.5,";position: absolute;z-index: ").concat(e,";bottom: -").concat(o,"px;right: -").concat(o,"px;width: 100%;height: 100%;"),n.appendChild(t)}),n},_setMultiDiffer:function(t){y[t]={sortable:this,group:this.el,nodes:b.map(function(t){return{node:t,rect:m(t),offset:d(t)}})}},_onMultiDrag:function(){this._setMultiDiffer("from")},_onMultiStarted:function(t){var e=t.e,o=t.evt,n=t.dragEl,i=(this._dispatchEvent("onDrag",h(h({},w()),{},{event:e,originalEvent:o})),this._captureAnimationState(n),b.forEach(function(t){t!==n&&g(t,"position","absolute")}),m(n,{relative:!0}));b.forEach(function(t){var e,o;t!==n&&(o=i,g(e=t,"position","absolute"),g(e,"top",o.top),g(e,"left",o.left),g(t,"display","none"))}),this._animate()},_onMultiMove:function(t){var e=t.e,o=t.evt,n=t.dragEl,t=t.ghostEl,i=(this._dispatchEvent("onMove",h(h({},w()),{},{ghostEl:t,event:e,originalEvent:o})),(t=e).pageX||t.pageY?{top:t.pageY,left:t.pageX}:t.clientX||t.clientY?{top:t.clientY+document.documentElement.scrollTop+document.body.scrollTop,left:t.clientX+document.documentElement.scrollLeft+document.body.scrollLeft}:void 0);b.forEach(function(t){t!==n&&(g(t,"top",i.top),g(t,"left",i.left))})},_onMultiChange:function(t){var e=t.dragEl,o=t.rootEl,n=t.target,i=t.e,t=t.evt;if(y.from.group){if(!K(o)||n===o&&y.from.group!==o)y.from.sortable._captureAnimationState(e,e),b.forEach(function(t){o.appendChild(t)}),this._setMultiDiffer("to"),y.from.sortable._dispatchEvent("onRemove",h(h({},w()),{},{event:i,originalEvent:t})),this._dispatchEvent("onAdd",h(h({},w()),{},{event:i,originalEvent:t})),y.from.sortable._animate();else{var n=v(o,n),r=n.el,a=n.rect,n=n.offset;if(!r||r.animated||r===e)return;this._setMultiDiffer("to");var s=i.clientX,l=i.clientY,c=a.left,u=a.right,f=a.top,a=a.bottom;c<s&&s<u&&f<l&&l<a&&(this._captureAnimationState(e,r),y.from.group!==y.to.group?(y.from.sortable._captureAnimationState(e,r),b.forEach(function(t){o.insertBefore(t,r)}),y.from.sortable._dispatchEvent("onRemove",h(h({},w()),{},{event:i,originalEvent:t})),this._dispatchEvent("onAdd",h(h({},w()),{},{event:i,originalEvent:t})),y.from.sortable._animate()):((c=d(e)).top<n.top||c.left<n.left?b.forEach(function(t){o.insertBefore(t,r.nextSibling)}):b.forEach(function(t){o.insertBefore(t,r)}),this._dispatchEvent("onChange",h(h({},w()),{},{event:i,originalEvent:t}))),this._animate())}y.from.sortable=this,y.from.group=o}},_onMultiDrop:function(t){for(var e,o=t.fromGroup,n=t.fromSortable,i=t.dragEl,r=t.rootEl,t=t.evt,a=(this._captureAnimationState(i),b.forEach(function(t){t!==i&&(g(t=t,"display",""),g(t,"position",""),g(t,"top",""),g(t,"left",""))}),b.indexOf(i)),s=0;s<b.length;s++)s<a?r.insertBefore(b[s],i):(e=0<s?b[s-1]:i,r.insertBefore(b[s],e.nextSibling));y.to.nodes=b.map(function(t){return{node:t,rect:m(t),offset:d(t)}}),y.to.group||(y.to.group=this.el,y.to.sortable=this),y.from.group=o,y.from.sortable=n;var l=nt(y.from.nodes,y.to.nodes),l=h(h({},w()),{},{changed:l,event:t,originalEvent:t});y.to.group!==o&&n._dispatchEvent("onDrop",l),this._dispatchEvent("onDrop",l),this._animate()}}}function rt(t){if(S){var e=t=t.touches?t.touches[0]:t,o=e.clientX,e=e.clientY,n=at(o,e);if(n){var i,r={};for(i in t)r[i]=t[i];r.target=document.elementFromPoint(o,e),E=n,r.preventDefault=void 0,r.stopPropagation=void 0,E!==C&&n[u]._onMove(r)}}}function at(i,r){var a;return st.some(function(t){var e,o,n=t[u].options.emptyInsertThreshold;if(n)return o=m(t,{parent:!0}),e=i>=o.left-n&&i<=o.right+n,o=r>=o.top-n&&r<=o.bottom+n,e&&o?a=t:void 0}),a}function f(){return{from:h({},k.from),to:h({},k.to)}}function _(t){return h(h({},t),{},{rootEl:E,dragEl:S,ghostEl:x,fromSortable:T,fromGroup:C,activeGroup:i})}var E,S,D,x,M,O,A,C,i,T,P,j={sortable:null,group:null,node:null,rect:{},offset:{}},st=[],k=new(function(){function t(){X(this,t),this.from=h({},j),this.to=h({},j)}return I(t,[{key:"destroy",value:function(){this.from=h({},j),this.to=h({},j)}}]),t}()),lt={x:0,y:0},B={x:0,y:0};function N(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));(t[u]=this).el=t,this.scrollEl=function(t,e){if(t&&t.getBoundingClientRect){var o=t,n=!1;do{if(o.clientWidth<o.scrollWidth||o.clientHeight<o.scrollHeight){var i=g(o);if(o.clientWidth<o.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||o.clientHeight<o.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!o.getBoundingClientRect||o===document.body)return J();if(n||e)return o;n=!0}}}while(o=o.parentNode)}return J()}(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var o,n,i={group:"",animation:150,multiple:!1,draggable:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,autoScroll:!0,scrollThreshold:25,delay:0,delayOnTouchOnly:!1,disabled:!1,ghostClass:"",ghostStyle:{},chosenClass:"",selectedClass:"",fallbackOnBody:!1,stopPropagation:!1,supportPointer:"onpointerdown"in window&&!s,supportTouch:"ontouchstart"in window,emptyInsertThreshold:5};for(o in i)o in this.options||(this.options[o]=i[o]);for(n in a={},(r=(e=e).group)&&"object"==F(r)||(r={name:r,pull:!0,put:!0}),a.name=r.name,a.pull=r.pull,a.put=r.put,e.group=a,this)"_"===n.charAt(0)&&"function"==typeof this[n]&&(this[n]=this[n].bind(this));var r=this.options,e=r.supportPointer,a=r.supportTouch;l(t,e?"pointerdown":a?"touchstart":"mousedown",this._onDrag),st.push(t),Object.assign(this,ot()),this._autoScroll=new et,this.options.multiple&&Object.assign(this,it())}return(N.prototype={constructor:N,destroy:function(){this._dispatchEvent("destroy",this),this.el[u]=null;for(var t=0;t<e.start.length;t++)o(this.el,e.start[t],this._onDrag);this._clearState(),clearTimeout(P),st.splice(st.indexOf(this.el),1),this.el=null},_onDrag:function(t){var e=this;if(!S&&!this.options.disabled&&this.options.group.pull){if(/mousedown|pointerdown/.test(t.type)&&0!==t.button)return!0;var t=$(t),o=t.touch,n=t.e,t=t.target;if(s&&t&&"SELECT"===t.tagName.toUpperCase())return!0;if(t===this.el)return!0;var i=this.options.draggable;if("function"==typeof i){var r=i(n);if(!r)return!0;Z(r)&&(S=r)}else if("string"==typeof i){if(!Q(t,i))return!0}else if(i)throw new Error('draggable expected "function" or "string" but received "'.concat(F(i),'"'));if(!(S=S||v(this.el,t,!0))||S.animated)return!0;o&&(S.style["touch-action"]="none"),C=this.el,(A=(T=this).options.multiple&&this._allowMultiDrag(S))&&this._onMultiDrag();r=v(this.el,S),i=r.rect,t=r.offset,r=(k.from={sortable:this,group:this.el,node:S,rect:i,offset:t},lt={x:n.clientX-i.left,y:n.clientY-i.top},M=n,this.options.supportPointer?l(this.ownerDocument,"pointermove",rt):l(this.ownerDocument,o?"touchmove":"mousemove",rt),this.options),t=r.delay,i=r.delayOnTouchOnly;!t||i&&!o||U||p?this._onStart(n,o):(clearTimeout(P),P=setTimeout(function(){return e._onStart(n,o)},t))}},_onStart:function(t,e){E=this.el,i=this.options.group,this.options.supportPointer?(l(this.ownerDocument,"pointermove",this._onMove),l(this.ownerDocument,"pointerup",this._onDrop),l(this.ownerDocument,"pointercancel",this._onDrop)):e?(l(this.ownerDocument,"touchmove",this._onMove),l(this.ownerDocument,"touchend",this._onDrop),l(this.ownerDocument,"touchcancel",this._onDrop)):(l(this.ownerDocument,"mousemove",this._onMove),l(this.ownerDocument,"mouseup",this._onDrop));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onTrulyStarted:function(t,e){O||(A?this._onMultiStarted(_({e:t,evt:e})):this._dispatchEvent("onDrag",h(h({},f()),{},{event:t,originalEvent:e})),this._appendGhost(),c(S,this.options.chosenClass,!0),S.style["will-change"]="transform",s&&g(document.body,"user-select","none")),O=t},_onMove:function(t){var e,o,n,i;this._preventEvent(t),M&&S&&(n=(e=t).clientX,e=e.clientY,i=n-B.x,o=e-B.y,B.x=n,B.y=e,void 0!==n&&void 0!==e&&Math.abs(i)<=0&&Math.abs(o)<=0||(e=(n=$(t)).e,i=n.target,this._onTrulyStarted(e,t),o=t.clientX-M.clientX,n=t.clientY-M.clientY,r(x,"none"),a(x,"translate3d(".concat(o,"px, ").concat(n,"px, 0)")),A?this._onMultiMove(_({e:e,evt:t})):this._dispatchEvent("onMove",h(h({},f()),{},{ghostEl:x,event:e,originalEvent:t})),this._allowPut()&&this._triggerChangeEvent(i,e,t),n=(o=this.options).autoScroll,i=o.scrollThreshold,n&&this._autoScroll.update(this.el,i,M,O)))},_allowPut:function(){var t;return C===this.el||!!this.options.group.put&&(t=this.options.group.name,i.name&&t&&i.name===t)},_appendGhost:function(){if(!x){var t,e=this.options,o=e.fallbackOnBody,n=e.ghostClass,e=e.ghostStyle,i=void 0===e?{}:e,e=o?document.body:this.el,o=m(S,{block:!0},e);for(t in c(x=A?this._getMultiGhostElement():S.cloneNode(!0),n,!0),g(x,"box-sizing","border-box"),g(x,"margin",0),g(x,"top",o.top),g(x,"left",o.left),g(x,"width",o.width),g(x,"height",o.height),g(x,"opacity","0.8"),g(x,"position","fixed"),g(x,"zIndex","100000"),g(x,"pointerEvents","none"),i)g(x,t,i[t]);r(x,"none"),a(x,"translate3d(0px, 0px, 0px)"),e.appendChild(x);n=lt.x/parseInt(x.style.width)*100,o=lt.y/parseInt(x.style.height)*100;g(x,"transform-origin","".concat(n,"% ").concat(o,"%")),g(x,"transform","translateZ(0)"),N.ghost=x}},_triggerChangeEvent:function(t,e,o){S&&(A?this._onMultiChange(_({target:t,e:e,evt:o})):this._onChange(t,e,o))},_onChange:function(t,e,o){if(k.from.group){if(!K(E)||t===E&&k.from.group!==E)k.from.sortable._captureAnimationState(S,S),k.to={sortable:this,group:E,node:S,rect:m(S),offset:d(S)},k.from.sortable._dispatchEvent("onRemove",h(h({},f()),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},f()),{},{event:e,originalEvent:o})),E.appendChild(S),k.from.sortable._animate();else{var t=v(E,t),n=t.el,i=t.rect,t=t.offset;if(!n||n.animated||n===S)return;D=n,k.to={sortable:this,group:E,node:D,rect:i,offset:t};var n=e.clientX,r=e.clientY,a=i.left,s=i.right,l=i.top,i=i.bottom;a<n&&n<s&&l<r&&r<i&&(this._captureAnimationState(S,D),k.from.group!==k.to.group?(k.from.sortable._captureAnimationState(S,D),k.from.sortable._dispatchEvent("onRemove",h(h({},f()),{},{event:e,originalEvent:o})),this._dispatchEvent("onAdd",h(h({},f()),{},{event:e,originalEvent:o})),E.insertBefore(S,D),k.from.sortable._animate()):(this._dispatchEvent("onChange",h(h({},f()),{},{event:e,originalEvent:o})),(a=d(S)).top<t.top||a.left<t.left?E.insertBefore(S,D.nextSibling):E.insertBefore(S,D)),this._animate())}k.from.sortable=this,k.from.group=E}},_onDrop:function(t){var e;this._unbindMoveEvents(),this._unbindDropEvents(),this._preventEvent(t),this._autoScroll.clear(),clearTimeout(P),S&&(e=$(t).touch,c(S,this.options.chosenClass,!1),e&&(S.style["touch-action"]=""),S.style["will-change"]=""),S&&M&&O?(A?this._onMultiDrop(_({evt:t})):(k.to.rect=m(S),k.to.offset=d(S),k.to.group||(k.to.group=this.el,k.to.sortable=this),k.from.group=C,k.from.sortable=T,e=tt(k.from.offset,k.to.offset),e=h(h({},f()),{},{changed:e,event:t,originalEvent:t}),k.to.group!==C&&T._dispatchEvent("onDrop",e),this._dispatchEvent("onDrop",e)),s&&g(document.body,"user-select","")):this.options.multiple&&this._setMultiElements(t,this.el),this._clearState()},_preventEvent:function(t){void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation()},_dispatchEvent:function(t,e){t=this.options[t];"function"==typeof t&&t(e)},_clearState:function(){x&&x.parentNode&&x.parentNode.removeChild(x),S=D=x=M=O=A=C=i=T=P=N.ghost=null,lt=B={x:0,y:0},k.destroy()},_unbindMoveEvents:function(){for(var t=0;t<e.move.length;t++)o(this.ownerDocument,e.move[t],this._onMove),o(this.ownerDocument,e.move[t],rt)},_unbindDropEvents:function(){for(var t=0;t<e.end.length;t++)o(this.ownerDocument,e.end[t],this._onDrop)}}).utils={getRect:m,getOffset:d},N});

12

package.json
{
"name": "sortable-dnd",
"version": "0.4.1",
"version": "0.4.2",
"description": "JS library for drag-and-drop lists, supports sortable and draggable",
"main": "dist/sortable.js",
"types": "typings/types.d.ts",
"types": "types/index.d.ts",
"files": [
"src",
"dist",
"typings"
"types"
],

@@ -38,2 +37,7 @@ "scripts": {

"@babel/preset-env": "^7.18.10",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^3.3.1",
"prettier": "^2.2.1",
"rollup": "^2.61.1",

@@ -40,0 +44,0 @@ "rollup-plugin-babel": "^4.4.0",

35

README.md

@@ -1,9 +0,2 @@

<p>
<a href="https://npm-stat.com/charts.html?package=sortable-dnd">
<img alt="Downloads" src="https://img.shields.io/npm/dt/sortable-dnd.svg">
</a>
<a href="https://www.npmjs.com/package/sortable-dnd">
<img alt="Version" src="https://img.shields.io/npm/v/sortable-dnd.svg"/>
</a>
</p>
[![npm](https://img.shields.io/npm/v/sortable-dnd.svg)](https://www.npmjs.com/package/sortable-dnd) [![npm](https://img.shields.io/npm/dt/sortable-dnd.svg)](https://npm-stat.com/charts.html?package=sortable-dnd) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)

@@ -14,3 +7,3 @@

## [Demo](https://mfuu.github.io/sortable-dnd/)
## [Live Demo](https://mfuu.github.io/sortable-dnd/)

@@ -23,11 +16,11 @@ # Usage

<li>
<i class="drag">drag me</i>
<i id="drag" class="drag">drag me</i>
<p>1</p>
</li>
<li>
<i class="drag">drag me</i>
<i id="drag" class="drag">drag me</i>
<p>2</p>
</li>
<li>
<i class="drag">drag me</i>
<i id="drag" class="drag">drag me</i>
<p>3</p>

@@ -50,3 +43,3 @@ </li>

// draggable: '#drag' // use id
// draggable: (e) => e.target.parentNode // use fundtion to set drag Element
// draggable: (e) => e.target.parentNode // use function to set drag Element
onDrag: ({ from, event, originalEvent }) => {

@@ -112,13 +105,11 @@ // code

| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
| `chosenClass` | `String` | `''` | The class of the selected element when dragging |
| `selectedClass` | `String` | `''` | Class name for selected item |
| `chosenClass` | `String` | `''` | Class name for the dragging item |
| `selectedClass` | `String` | `''` | The class of the element when it is selected, it is usually used when multiple drag |
| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container, **for browsers that do not support HTML5 drag events** |
| `scrollStep` | `Number` | `5` | The distance to scroll each frame when autoscrolling |
| `scrollThreshold` | `Number` | `15` | Threshold to trigger autoscroll |
| `delay` | `Number` | `0` | time in milliseconds to define when the sorting should start |
| `delayOnTouchOnly`| `Boolean` | `false` | only delay if user is using touch |
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
| `scrollThreshold` | `Number` | `25` | Threshold to trigger autoscroll |
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
| `delayOnTouchOnly`| `Boolean` | `false` | Only delay if user is using touch |
| `fallbackOnBody` | `Boolean` | `false` | Appends the cloned DOM Element into the Document's Body |
| `forceFallback` | `Boolean` | `false` | true: ignore the HTML5 DnD behaviour and force the fallback to kick in |
| `stopPropagation` | `Boolean` | `false` | The `stopPropagation()` method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases |

@@ -128,2 +119,2 @@

[MIT](https://github.com/mfuu/sortable-dnd/blob/main/LICENSE)
[MIT License](https://github.com/mfuu/sortable-dnd/blob/main/LICENSE)
src/Animation.js
src/Autoscroll.js
src/Multiple.js
src/Sortable.js
src/utils.js
typings/types.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc