/**!

* Sortable

* @author RubaXa <trash@rubaxa.org>

* @author owenm <owen23355@gmail.com>

* @license MIT

*/

import { version } from '../package.json';

import { IE11OrLess, Edge, FireFox, Safari, IOS, ChromeForAndroid } from './BrowserInfo.js';

import AnimationStateManager from './Animation.js';

import PluginManager from './PluginManager.js';

import dispatchEvent from './EventDispatcher.js';

import {

on,

off,

closest,

toggleClass,

css,

matrix,

find,

getWindowScrollingElement,

getRect,

isScrolledPast,

getChild,

lastChild,

index,

getRelativeScrollOffset,

extend,

throttle,

scrollBy,

clone,

expando,

getChildContainingRectFromElement,

getParentOrHost

} from './utils.js';

let pluginEvent = function(eventName, sortable, { evt: originalEvent, ...data } = {}) {

PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, {

dragEl,

parentEl,

ghostEl,

rootEl,

nextEl,

lastDownEl,

cloneEl,

cloneHidden,

dragStarted: moved,

putSortable,

activeSortable: Sortable.active,

originalEvent,

oldIndex,

oldDraggableIndex,

newIndex,

newDraggableIndex,

hideGhostForTarget: _hideGhostForTarget,

unhideGhostForTarget: _unhideGhostForTarget,

cloneNowHidden() {

cloneHidden = true;

},

cloneNowShown() {

cloneHidden = false;

},

dispatchSortableEvent(name) {

_dispatchEvent({ sortable, name, originalEvent });

},

...data

});

};

function _dispatchEvent(info) {

dispatchEvent({

putSortable,

cloneEl,

targetEl: dragEl,

rootEl,

oldIndex,

oldDraggableIndex,

newIndex,

newDraggableIndex,

...info

});

}

let dragEl,

parentEl,

ghostEl,

rootEl,

nextEl,

lastDownEl,

cloneEl,

cloneHidden,

oldIndex,

newIndex,

oldDraggableIndex,

newDraggableIndex,

activeGroup,

putSortable,

awaitingDragStarted = false,

ignoreNextClick = false,

sortables = [],

tapEvt,

touchEvt,

lastDx,

lastDy,

tapDistanceLeft,

tapDistanceTop,

moved,

lastTarget,

lastDirection,

pastFirstInvertThresh = false,

isCircumstantialInvert = false,

targetMoveDistance,

// For positioning ghost absolutely

ghostRelativeParent,

ghostRelativeParentInitialScroll = [], // (left, top)

_silent = false,

savedInputChecked = [];

/** @const */

const documentExists = typeof document !== 'undefined',

PositionGhostAbsolutely = IOS,

CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float',

// This will not pass for IE9, because IE9 DnD only works on anchors

supportDraggable = documentExists && !ChromeForAndroid && !IOS && ('draggable' in document.createElement('div')),

supportCssPointerEvents = (function() {

if (!documentExists) return;

// false when <= IE11

if (IE11OrLess) {

return false;

}

let el = document.createElement('x');

el.style.cssText = 'pointer-events:auto';

return el.style.pointerEvents === 'auto';

})(),

_detectDirection = function(el, options) {

let elCSS = css(el),

elWidth = parseInt(elCSS.width)

- parseInt(elCSS.paddingLeft)

- parseInt(elCSS.paddingRight)

- parseInt(elCSS.borderLeftWidth)

- parseInt(elCSS.borderRightWidth),

child1 = getChild(el, 0, options),

child2 = getChild(el, 1, options),

firstChildCSS = child1 && css(child1),

secondChildCSS = child2 && css(child2),

firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,

secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;

if (elCSS.display === 'flex') {

return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse'

? 'vertical' : 'horizontal';

}

if (elCSS.display === 'grid') {

return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal';

}

if (child1 && firstChildCSS.float && firstChildCSS.float !== 'none') {

let touchingSideChild2 = firstChildCSS.float === 'left' ? 'left' : 'right';

return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ?

'vertical' : 'horizontal';

}

return (child1 &&

(

firstChildCSS.display === 'block' ||

firstChildCSS.display === 'flex' ||

firstChildCSS.display === 'table' ||

firstChildCSS.display === 'grid' ||

firstChildWidth >= elWidth &&

elCSS[CSSFloatProperty] === 'none' ||

child2 &&

elCSS[CSSFloatProperty] === 'none' &&

firstChildWidth + secondChildWidth > elWidth

) ?

'vertical' : 'horizontal'

);

},

_dragElInRowColumn = function(dragRect, targetRect, vertical) {

let dragElS1Opp = vertical ? dragRect.left : dragRect.top,

dragElS2Opp = vertical ? dragRect.right : dragRect.bottom,

dragElOppLength = vertical ? dragRect.width : dragRect.height,

targetS1Opp = vertical ? targetRect.left : targetRect.top,

targetS2Opp = vertical ? targetRect.right : targetRect.bottom,

targetOppLength = vertical ? targetRect.width : targetRect.height;

return (

dragElS1Opp === targetS1Opp ||

dragElS2Opp === targetS2Opp ||

(dragElS1Opp + dragElOppLength / 2) === (targetS1Opp + targetOppLength / 2)

);

},

/**

* Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.

* @param {Number} x X position

* @param {Number} y Y position

* @return {HTMLElement} Element of the first found nearest Sortable

*/

_detectNearestEmptySortable = function(x, y) {

let ret;

sortables.some((sortable) => {

const threshold = sortable[expando].options.emptyInsertThreshold;

if (!threshold || lastChild(sortable)) return;

const rect = getRect(sortable),

insideHorizontally = x >= (rect.left - threshold) && x <= (rect.right + threshold),

insideVertically = y >= (rect.top - threshold) && y <= (rect.bottom + threshold);

if (insideHorizontally && insideVertically) {

return (ret = sortable);

}

});

return ret;

},

_prepareGroup = function (options) {

function toFn(value, pull) {

return function(to, from, dragEl, evt) {

let sameGroup = to.options.group.name &&

from.options.group.name &&

to.options.group.name === from.options.group.name;

if (value == null && (pull || sameGroup)) {

// Default pull value

// Default pull and put value if same group

return true;

} else if (value == null || value === false) {

return false;

} else if (pull && value === 'clone') {

return value;

} else if (typeof value === 'function') {

return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt);

} else {

let otherGroup = (pull ? to : from).options.group.name;

return (value === true ||

(typeof value === 'string' && value === otherGroup) ||

(value.join && value.indexOf(otherGroup) > -1));

}

};

}

let group = {};

let originalGroup = options.group;

if (!originalGroup || typeof originalGroup != 'object') {

originalGroup = {name: originalGroup};

}

group.name = originalGroup.name;

group.checkPull = toFn(originalGroup.pull, true);

group.checkPut = toFn(originalGroup.put);

group.revertClone = originalGroup.revertClone;

options.group = group;

},

_hideGhostForTarget = function() {

if (!supportCssPointerEvents && ghostEl) {

css(ghostEl, 'display', 'none');

}

},

_unhideGhostForTarget = function() {

if (!supportCssPointerEvents && ghostEl) {

css(ghostEl, 'display', '');

}

};

// #1184 fix - Prevent click event on fallback if dragged but item not changed position

if (documentExists && !ChromeForAndroid) {

document.addEventListener('click', function(evt) {

if (ignoreNextClick) {

evt.preventDefault();

evt.stopPropagation && evt.stopPropagation();

evt.stopImmediatePropagation && evt.stopImmediatePropagation();

ignoreNextClick = false;

return false;

}

}, true);

}

let nearestEmptyInsertDetectEvent = function(evt) {

if (dragEl) {

evt = evt.touches ? evt.touches[0] : evt;

let nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY);

if (nearest) {

// Create imitation event

let event = {};

for (let i in evt) {

if (evt.hasOwnProperty(i)) {

event[i] = evt[i];

}

}

event.target = event.rootEl = nearest;

event.preventDefault = void 0;

event.stopPropagation = void 0;

nearest[expando]._onDragOver(event);

}

}

};

let _checkOutsideTargetEl = function(evt) {

if (dragEl) {

dragEl.parentNode[expando]._isOutsideThisEl(evt.target);

}

};

/**

* @class Sortable

* @param {HTMLElement} el

* @param {Object} [options]

*/

function Sortable(el, options) {

if (!(el && el.nodeType && el.nodeType === 1)) {

throw `Sortable: \`el\` must be an HTMLElement, not ${ {}.toString.call(el) }`;

}

this.el = el; // root element

this.options = options = Object.assign({}, options);

// Export instance

el[expando] = this;

let defaults = {

group: null,

sort: true,

disabled: false,

store: null,

handle: null,

draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*',

swapThreshold: 1, // percentage; 0 <= x <= 1

invertSwap: false, // invert always

invertedSwapThreshold: null, // will be set to same as swapThreshold if default

removeCloneOnHide: true,

direction: function() {

return _detectDirection(el, this.options);

},

ghostClass: 'sortable-ghost',

chosenClass: 'sortable-chosen',

dragClass: 'sortable-drag',

ignore: 'a, img',

filter: null,

preventOnFilter: true,

animation: 0,

easing: null,

setData: function (dataTransfer, dragEl) {

dataTransfer.setData('Text', dragEl.textContent);

},

dropBubble: false,

dragoverBubble: false,

dataIdAttr: 'data-id',

delay: 0,

delayOnTouchOnly: false,

touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,

forceFallback: false,

fallbackClass: 'sortable-fallback',

fallbackOnBody: false,

fallbackTolerance: 0,

fallbackOffset: {x: 0, y: 0},

// Disabled on Safari: #1571; Enabled on Safari IOS: #2244

supportPointer: Sortable.supportPointer !== false && ('PointerEvent' in window) && (!Safari || IOS),

emptyInsertThreshold: 5

};

PluginManager.initializePlugins(this, el, defaults);

// Set default options

for (let name in defaults) {

!(name in options) && (options[name] = defaults[name]);

}

_prepareGroup(options);

// Bind all private methods

for (let fn in this) {

if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {

this[fn] = this[fn].bind(this);

}

}

// Setup drag mode

this.nativeDraggable = options.forceFallback ? false : supportDraggable;

if (this.nativeDraggable) {

// Touch start threshold cannot be greater than the native dragstart threshold

this.options.touchStartThreshold = 1;

}

// Bind events

if (options.supportPointer) {

on(el, 'pointerdown', this._onTapStart);

} else {

on(el, 'mousedown', this._onTapStart);

on(el, 'touchstart', this._onTapStart);

}

if (this.nativeDraggable) {

on(el, 'dragover', this);

on(el, 'dragenter', this);

}

sortables.push(this.el);

// Restore sorting

options.store && options.store.get && this.sort(options.store.get(this) || []);

// Add animation state manager

Object.assign(this, AnimationStateManager());

}

Sortable.prototype = /** @lends Sortable.prototype */ {

constructor: Sortable,

_isOutsideThisEl: function(target) {

if (!this.el.contains(target) && target !== this.el) {

lastTarget = null;

}

},

_getDirection: function(evt, target) {

return (typeof this.options.direction === 'function') ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction;

},

_onTapStart: function (/** Event|TouchEvent */evt) {

if (!evt.cancelable) return;

let _this = this,

el = this.el,

options = this.options,

preventOnFilter = options.preventOnFilter,

type = evt.type,

touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt),

target = (touch || evt).target,

originalTarget = evt.target.shadowRoot && ((evt.path && evt.path[0]) || (evt.composedPath && evt.composedPath()[0])) || target,

filter = options.filter;

_saveInputCheckedState(el);

// Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.

if (dragEl) {

return;

}

if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) {

return; // only left button and enabled

}

// cancel dnd if original target is content editable

if (originalTarget.isContentEditable) {

return;

}

// Safari ignores further event handling after mousedown

if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') {

return;

}

target = closest(target, options.draggable, el, false);

if (target && target.animated) {

return;

}

if (lastDownEl === target) {

// Ignoring duplicate `down`

return;

}

// Get the index of the dragged element within its parent

oldIndex = index(target);

oldDraggableIndex = index(target, options.draggable);

// Check filter

if (typeof filter === 'function') {

if (filter.call(this, evt, target, this)) {

_dispatchEvent({

sortable: _this,

rootEl: originalTarget,

name: 'filter',

targetEl: target,

toEl: el,

fromEl: el

});

pluginEvent('filter', _this, { evt });

preventOnFilter && evt.preventDefault();

return; // cancel dnd

}

}

else if (filter) {

filter = filter.split(',').some(function (criteria) {

criteria = closest(originalTarget, criteria.trim(), el, false);

if (criteria) {

_dispatchEvent({

sortable: _this,

rootEl: criteria,

name: 'filter',

targetEl: target,

fromEl: el,

toEl: el

});

pluginEvent('filter', _this, { evt });

return true;

}

});

if (filter) {

preventOnFilter && evt.preventDefault();

return; // cancel dnd

}

}

if (options.handle && !closest(originalTarget, options.handle, el, false)) {

return;

}

// Prepare `dragstart`

this._prepareDragStart(evt, touch, target);

},

_prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target) {

let _this = this,

el = _this.el,

options = _this.options,

ownerDocument = el.ownerDocument,

dragStartFn;

if (target && !dragEl && (target.parentNode === el)) {

let dragRect = getRect(target);

rootEl = el;

dragEl = target;

parentEl = dragEl.parentNode;

nextEl = dragEl.nextSibling;

lastDownEl = target;

activeGroup = options.group;

Sortable.dragged = dragEl;

tapEvt = {

target: dragEl,

clientX: (touch || evt).clientX,

clientY: (touch || evt).clientY

};

tapDistanceLeft = tapEvt.clientX - dragRect.left;

tapDistanceTop = tapEvt.clientY - dragRect.top;

this._lastX = (touch || evt).clientX;

this._lastY = (touch || evt).clientY;

dragEl.style['will-change'] = 'all';

dragStartFn = function () {

pluginEvent('delayEnded', _this, { evt });

if (Sortable.eventCanceled) {

_this._onDrop();

return;

}

// Delayed drag has been triggered

// we can re-enable the events: touchmove/mousemove

_this._disableDelayedDragEvents();

if (!FireFox && _this.nativeDraggable) {

dragEl.draggable = true;

}

// Bind the events: dragstart/dragend

_this._triggerDragStart(evt, touch);

// Drag start event

_dispatchEvent({

sortable: _this,

name: 'choose',

originalEvent: evt

});

// Chosen item

toggleClass(dragEl, options.chosenClass, true);

};

// Disable "draggable"

options.ignore.split(',').forEach(function (criteria) {

find(dragEl, criteria.trim(), _disableDraggable);

});

on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent);

on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);

on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);

if (options.supportPointer) {

on(ownerDocument, 'pointerup', _this._onDrop);

// Native D&D triggers pointercancel

!this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop);

} else {

on(ownerDocument, 'mouseup', _this._onDrop);

on(ownerDocument, 'touchend', _this._onDrop);

on(ownerDocument, 'touchcancel', _this._onDrop);

}

// Make dragEl draggable (must be before delay for FireFox)

if (FireFox && this.nativeDraggable) {

this.options.touchStartThreshold = 4;

dragEl.draggable = true;

}

pluginEvent('delayStart', this, { evt });

// Delay is impossible for native DnD in Edge or IE

if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {

if (Sortable.eventCanceled) {

this._onDrop();

return;

}

// If the user moves the pointer or let go the click or touch

// before the delay has been reached:

// disable the delayed drag

if (options.supportPointer) {

on(ownerDocument, 'pointerup', _this._disableDelayedDrag);

on(ownerDocument, 'pointercancel', _this._disableDelayedDrag);

} else {

on(ownerDocument, 'mouseup', _this._disableDelayedDrag);

on(ownerDocument, 'touchend', _this._disableDelayedDrag);

on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);

}

on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);

on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);

options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);

_this._dragStartTimer = setTimeout(dragStartFn, options.delay);

} else {

dragStartFn();

}

}

},

_delayedDragTouchMoveHandler: function (/** TouchEvent|PointerEvent **/e) {

let touch = e.touches ? e.touches[0] : e;

if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY))

>= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))

) {

this._disableDelayedDrag();

}

},

_disableDelayedDrag: function () {

dragEl && _disableDraggable(dragEl);

clearTimeout(this._dragStartTimer);

this._disableDelayedDragEvents();

},

_disableDelayedDragEvents: function () {

let ownerDocument = this.el.ownerDocument;

off(ownerDocument, 'mouseup', this._disableDelayedDrag);

off(ownerDocument, 'touchend', this._disableDelayedDrag);

off(ownerDocument, 'touchcancel', this._disableDelayedDrag);

off(ownerDocument, 'pointerup', this._disableDelayedDrag);

off(ownerDocument, 'pointercancel', this._disableDelayedDrag);

off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);

off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);

off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);

},

_triggerDragStart: function (/** Event */evt, /** Touch */touch) {

touch = touch || (evt.pointerType == 'touch' && evt);

if (!this.nativeDraggable || touch) {

if (this.options.supportPointer) {

on(document, 'pointermove', this._onTouchMove);

} else if (touch) {

on(document, 'touchmove', this._onTouchMove);

} else {

on(document, 'mousemove', this._onTouchMove);

}

} else {

on(dragEl, 'dragend', this);

on(rootEl, 'dragstart', this._onDragStart);

}

try {

if (document.selection) {

_nextTick(() => {

document.selection.empty();

});

} else {

window.getSelection().removeAllRanges();

}

} catch (err) {

}

},

_dragStarted: function (fallback, evt) {

let _this = this;

awaitingDragStarted = false;

if (rootEl && dragEl) {

pluginEvent('dragStarted', this, { evt });

if (this.nativeDraggable) {

on(document, 'dragover', _checkOutsideTargetEl);

}

let options = this.options;

// Apply effect

!fallback && toggleClass(dragEl, options.dragClass, false);

toggleClass(dragEl, options.ghostClass, true);

Sortable.active = this;

fallback && this._appendGhost();

// Drag start event

_dispatchEvent({

sortable: this,

name: 'start',

originalEvent: evt

});

} else {

this._nulling();

}

},

_emulateDragOver: function () {

if (touchEvt) {

this._lastX = touchEvt.clientX;

this._lastY = touchEvt.clientY;

_hideGhostForTarget();

let target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);

let parent = target;

while (target && target.shadowRoot) {

target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);

if (target === parent) break;

parent = target;

}

dragEl.parentNode[expando]._isOutsideThisEl(target);

if (parent) {

do {

if (parent[expando]) {

let inserted;

inserted = parent[expando]._onDragOver({

clientX: touchEvt.clientX,

clientY: touchEvt.clientY,

target: target,

rootEl: parent

});

if (inserted && !this.options.dragoverBubble) {

break;

}

}

target = parent; // store last element

}

/* jshint boss:true */

while (parent = getParentOrHost(parent));

}

_unhideGhostForTarget();

}

},

_onTouchMove: function (/**TouchEvent*/evt) {

if (tapEvt) {

let options = this.options,

fallbackTolerance = options.fallbackTolerance,

fallbackOffset = options.fallbackOffset,

touch = evt.touches ? evt.touches[0] : evt,

ghostMatrix = ghostEl && matrix(ghostEl, true),

scaleX = ghostEl && ghostMatrix && ghostMatrix.a,

scaleY = ghostEl && ghostMatrix && ghostMatrix.d,

relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent),

dx = ((touch.clientX - tapEvt.clientX)

+ fallbackOffset.x) / (scaleX || 1)

+ (relativeScrollOffset ? (relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0]) : 0) / (scaleX || 1),

dy = ((touch.clientY - tapEvt.clientY)

+ fallbackOffset.y) / (scaleY || 1)

+ (relativeScrollOffset ? (relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1]) : 0) / (scaleY || 1);

// only set the status to dragging, when we are actually dragging

if (!Sortable.active && !awaitingDragStarted) {

if (fallbackTolerance &&

Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance

) {

return;

}

this._onDragStart(evt, true);

}

if (ghostEl) {

if (ghostMatrix) {

ghostMatrix.e += dx - (lastDx || 0);

ghostMatrix.f += dy - (lastDy || 0);

} else {

ghostMatrix = {

a: 1,

b: 0,

c: 0,

d: 1,

e: dx,

f: dy

};

}

let cssMatrix = `matrix(${ghostMatrix.a},${ghostMatrix.b},${ghostMatrix.c},${ghostMatrix.d},${ghostMatrix.e},${ghostMatrix.f})`;

css(ghostEl, 'webkitTransform', cssMatrix);

css(ghostEl, 'mozTransform', cssMatrix);

css(ghostEl, 'msTransform', cssMatrix);

css(ghostEl, 'transform', cssMatrix);

lastDx = dx;

lastDy = dy;

touchEvt = touch;

}

evt.cancelable && evt.preventDefault();

}

},

_appendGhost: function () {

// Bug if using scale(): https://stackoverflow.com/questions/2637058

// Not being adjusted for

if (!ghostEl) {

let container = this.options.fallbackOnBody ? document.body : rootEl,

rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container),

options = this.options;

// Position absolutely

if (PositionGhostAbsolutely) {

// Get relatively positioned parent

ghostRelativeParent = container;

while (

css(ghostRelativeParent, 'position') === 'static' &&

css(ghostRelativeParent, 'transform') === 'none' &&

ghostRelativeParent !== document

) {

ghostRelativeParent = ghostRelativeParent.parentNode;

}

if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) {

if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement();

rect.top += ghostRelativeParent.scrollTop;

rect.left += ghostRelativeParent.scrollLeft;

} else {

ghostRelativeParent = getWindowScrollingElement();

}

ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent);

}

ghostEl = dragEl.cloneNode(true);

toggleClass(ghostEl, options.ghostClass, false);

toggleClass(ghostEl, options.fallbackClass, true);

toggleClass(ghostEl, options.dragClass, true);

css(ghostEl, 'transition', '');

css(ghostEl, 'transform', '');

css(ghostEl, 'box-sizing', 'border-box');

css(ghostEl, 'margin', 0);

css(ghostEl, 'top', rect.top);

css(ghostEl, 'left', rect.left);

css(ghostEl, 'width', rect.width);

css(ghostEl, 'height', rect.height);

css(ghostEl, 'opacity', '0.8');

css(ghostEl, 'position', (PositionGhostAbsolutely ? 'absolute' : 'fixed'));

css(ghostEl, 'zIndex', '100000');

css(ghostEl, 'pointerEvents', 'none');

Sortable.ghost = ghostEl;

container.appendChild(ghostEl);

// Set transform-origin

css(ghostEl, 'transform-origin', (tapDistanceLeft / parseInt(ghostEl.style.width) * 100) + '% ' + (tapDistanceTop / parseInt(ghostEl.style.height) * 100) + '%');

}

},

_onDragStart: function (/**Event*/evt, /**boolean*/fallback) {

let _this = this;

let dataTransfer = evt.dataTransfer;

let options = _this.options;

pluginEvent('dragStart', this, { evt });

if (Sortable.eventCanceled) {

this._onDrop();

return;

}

pluginEvent('setupClone', this);

if (!Sortable.eventCanceled) {

cloneEl = clone(dragEl);

cloneEl.removeAttribute("id");

cloneEl.draggable = false;

cloneEl.style['will-change'] = '';

this._hideClone();

toggleClass(cloneEl, this.options.chosenClass, false);

Sortable.clone = cloneEl;

}

// #1143: IFrame support workaround

_this.cloneId = _nextTick(function() {

pluginEvent('clone', _this);

if (Sortable.eventCanceled) return;

if (!_this.options.removeCloneOnHide) {

rootEl.insertBefore(cloneEl, dragEl);

}

_this._hideClone();

_dispatchEvent({

sortable: _this,

name: 'clone'

});

});

!fallback && toggleClass(dragEl, options.dragClass, true);

// Set proper drop events

if (fallback) {

ignoreNextClick = true;

_this._loopId = setInterval(_this._emulateDragOver, 50);

} else {

// Undo what was set in _prepareDragStart before drag started

off(document, 'mouseup', _this._onDrop);

off(document, 'touchend', _this._onDrop);

off(document, 'touchcancel', _this._onDrop);

if (dataTransfer) {

dataTransfer.effectAllowed = 'move';

options.setData && options.setData.call(_this, dataTransfer, dragEl);

}

on(document, 'drop', _this);

// #1276 fix:

css(dragEl, 'transform', 'translateZ(0)');

}

awaitingDragStarted = true;

_this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt));

on(document, 'selectstart', _this);

moved = true;