vue3-drag-drop
Version:
Simple drag and drop using native event API for Vue 3
178 lines (177 loc) • 9.22 kB
JavaScript
var l;
(function(u) {
var _ = function() {
function i() {
this._dropEffect = "move", this._effectAllowed = "all", this._data = {};
}
return Object.defineProperty(i.prototype, "dropEffect", {
get: function() {
return this._dropEffect;
},
set: function(t) {
this._dropEffect = t;
},
enumerable: !0,
configurable: !0
}), Object.defineProperty(i.prototype, "effectAllowed", {
get: function() {
return this._effectAllowed;
},
set: function(t) {
this._effectAllowed = t;
},
enumerable: !0,
configurable: !0
}), Object.defineProperty(i.prototype, "types", {
get: function() {
return Object.keys(this._data);
},
enumerable: !0,
configurable: !0
}), i.prototype.clearData = function(t) {
t !== null ? delete this._data[t.toLowerCase()] : this._data = {};
}, i.prototype.getData = function(t) {
return this._data[t.toLowerCase()] || "";
}, i.prototype.setData = function(t, e) {
this._data[t.toLowerCase()] = e;
}, i.prototype.setDragImage = function(t, e, n) {
var s = o._instance;
s._imgCustom = t, s._imgOffset = { x: e, y: n };
}, i;
}();
u.DataTransfer = _;
var o = function() {
function i() {
if (this._lastClick = 0, i._instance)
throw "DragDropTouch instance already created.";
var t = !1;
if (document.addEventListener("test", function() {
}, {
get passive() {
return t = !0, !0;
}
}), navigator.maxTouchPoints) {
var e = document, n = this._touchstart.bind(this), s = this._touchmove.bind(this), r = this._touchend.bind(this), a = t ? { passive: !1, capture: !1 } : !1;
e.addEventListener("touchstart", n, a), e.addEventListener("touchmove", s, a), e.addEventListener("touchend", r), e.addEventListener("touchcancel", r);
}
}
return i.getInstance = function() {
return i._instance;
}, i.prototype._touchstart = function(t) {
var e = this;
if (this._shouldHandle(t)) {
this._reset();
var n = this._closestDraggable(t.target);
n && !this._dispatchEvent(t, "mousemove", t.target) && !this._dispatchEvent(t, "mousedown", t.target) && (this._dragSource = n, this._ptDown = this._getPoint(t), this._lastTouch = t, t.preventDefault(), setTimeout(function() {
e._dragSource === n && e._img === null && e._dispatchEvent(t, "contextmenu", n) && e._reset();
}, i._CTXMENU), i._ISPRESSHOLDMODE && (this._pressHoldInterval = setTimeout(function() {
e._isDragEnabled = !0, e._touchmove(t);
}, i._PRESSHOLDAWAIT)));
}
}, i.prototype._touchmove = function(t) {
if (this._shouldCancelPressHoldMove(t)) {
this._reset();
return;
}
if (this._shouldHandleMove(t) || this._shouldHandlePressHoldMove(t)) {
var e = this._getTarget(t);
if (this._dispatchEvent(t, "mousemove", e)) {
this._lastTouch = t, t.preventDefault();
return;
}
if (this._dragSource && !this._img && this._shouldStartDragging(t)) {
if (this._dispatchEvent(this._lastTouch, "dragstart", this._dragSource)) {
this._dragSource = null;
return;
}
this._createImage(t), this._dispatchEvent(t, "dragenter", e);
}
this._img && (this._lastTouch = t, t.preventDefault(), this._dispatchEvent(t, "drag", this._dragSource), e !== this._lastTarget && (this._dispatchEvent(this._lastTouch, "dragleave", this._lastTarget), this._dispatchEvent(t, "dragenter", e), this._lastTarget = e), this._moveImage(t), this._isDropZone = this._dispatchEvent(t, "dragover", e));
}
}, i.prototype._touchend = function(t) {
if (this._shouldHandle(t)) {
if (this._dispatchEvent(this._lastTouch, "mouseup", t.target)) {
t.preventDefault();
return;
}
this._img || (this._dragSource = null, this._dispatchEvent(this._lastTouch, "click", t.target), this._lastClick = Date.now()), this._destroyImage(), this._dragSource && (t.type.indexOf("cancel") < 0 && this._isDropZone && this._dispatchEvent(this._lastTouch, "drop", this._lastTarget), this._dispatchEvent(this._lastTouch, "dragend", this._dragSource), this._reset());
}
}, i.prototype._shouldHandle = function(t) {
return t && !t.defaultPrevented && t.touches && t.touches.length < 2;
}, i.prototype._shouldHandleMove = function(t) {
return !i._ISPRESSHOLDMODE && this._shouldHandle(t);
}, i.prototype._shouldHandlePressHoldMove = function(t) {
return i._ISPRESSHOLDMODE && this._isDragEnabled && t && t.touches && t.touches.length;
}, i.prototype._shouldCancelPressHoldMove = function(t) {
return i._ISPRESSHOLDMODE && !this._isDragEnabled && this._getDelta(t) > i._PRESSHOLDMARGIN;
}, i.prototype._shouldStartDragging = function(t) {
var e = this._getDelta(t);
return e > i._THRESHOLD || i._ISPRESSHOLDMODE && e >= i._PRESSHOLDTHRESHOLD;
}, i.prototype._reset = function() {
this._destroyImage(), this._dragSource = null, this._lastTouch = null, this._lastTarget = null, this._ptDown = null, this._isDragEnabled = !1, this._isDropZone = !1, this._dataTransfer = new _(), clearInterval(this._pressHoldInterval);
}, i.prototype._getPoint = function(t, e) {
return t && t.touches && (t = t.touches[0]), { x: e ? t.pageX : t.clientX, y: e ? t.pageY : t.clientY };
}, i.prototype._getDelta = function(t) {
if (i._ISPRESSHOLDMODE && !this._ptDown)
return 0;
var e = this._getPoint(t);
return Math.abs(e.x - this._ptDown.x) + Math.abs(e.y - this._ptDown.y);
}, i.prototype._getTarget = function(t) {
for (var e = this._getPoint(t), n = document.elementFromPoint(e.x, e.y); n && getComputedStyle(n).pointerEvents == "none"; )
n = n.parentElement;
return n;
}, i.prototype._createImage = function(t) {
this._img && this._destroyImage();
var e = this._imgCustom || this._dragSource;
if (this._img = e.cloneNode(!0), this._copyStyle(e, this._img), this._img.style.top = this._img.style.left = "-9999px", !this._imgCustom) {
var n = e.getBoundingClientRect(), s = this._getPoint(t);
this._imgOffset = { x: s.x - n.left, y: s.y - n.top }, this._img.style.opacity = i._OPACITY.toString();
}
this._moveImage(t), document.body.appendChild(this._img);
}, i.prototype._destroyImage = function() {
this._img && this._img.parentElement && this._img.parentElement.removeChild(this._img), this._img = null, this._imgCustom = null;
}, i.prototype._moveImage = function(t) {
var e = this;
requestAnimationFrame(function() {
if (e._img) {
var n = e._getPoint(t, !0), s = e._img.style;
s.position = "absolute", s.pointerEvents = "none", s.zIndex = "999999", s.left = Math.round(n.x - e._imgOffset.x) + "px", s.top = Math.round(n.y - e._imgOffset.y) + "px";
}
});
}, i.prototype._copyProps = function(t, e, n) {
for (var s = 0; s < n.length; s++) {
var r = n[s];
t[r] = e[r];
}
}, i.prototype._copyStyle = function(t, e) {
if (i._rmvAtts.forEach(function(c) {
e.removeAttribute(c);
}), t instanceof HTMLCanvasElement) {
var n = t, s = e;
s.width = n.width, s.height = n.height, s.getContext("2d").drawImage(n, 0, 0);
}
for (var r = getComputedStyle(t), a = 0; a < r.length; a++) {
var h = r[a];
h.indexOf("transition") < 0 && (e.style[h] = r[h]);
}
e.style.pointerEvents = "none";
for (var a = 0; a < t.children.length; a++)
this._copyStyle(t.children[a], e.children[a]);
}, i.prototype._setOffsetAndLayerProps = function(t, e) {
var n = void 0;
t.offsetX === void 0 && (n = e.getBoundingClientRect(), t.offsetX = t.clientX - n.x, t.offsetY = t.clientY - n.y), t.layerX === void 0 && (n = n || e.getBoundingClientRect(), t.layerX = t.pageX - n.left, t.layerY = t.pageY - n.top);
}, i.prototype._dispatchEvent = function(t, e, n) {
if (t && n) {
var s = document.createEvent("Event"), r = t.touches ? t.touches[0] : t;
return s.initEvent(e, !0, !0), s.button = 0, s.which = s.buttons = 1, this._copyProps(s, t, i._kbdProps), this._copyProps(s, r, i._ptProps), this._setOffsetAndLayerProps(s, n), s.dataTransfer = this._dataTransfer, n.dispatchEvent(s), s.defaultPrevented;
}
return !1;
}, i.prototype._closestDraggable = function(t) {
for (; t; t = t.parentElement)
if (t.hasAttribute("draggable") && t.draggable)
return t;
return null;
}, i;
}();
o._instance = new o(), o._THRESHOLD = 5, o._OPACITY = 0.5, o._DBLCLICK = 500, o._CTXMENU = 900, o._ISPRESSHOLDMODE = !1, o._PRESSHOLDAWAIT = 400, o._PRESSHOLDMARGIN = 25, o._PRESSHOLDTHRESHOLD = 0, o._rmvAtts = "id,class,style,draggable".split(","), o._kbdProps = "altKey,ctrlKey,metaKey,shiftKey".split(","), o._ptProps = "pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY".split(","), u.DragDropTouch = o;
})(l || (l = {}));