fluid-dnd
Version:
An agnostic drag and drop library to sort all kind of lists. With current support for vue 3 and svelte
1,242 lines (1,241 loc) • 31.5 kB
JavaScript
var pe = Object.defineProperty;
var he = (t, e, n) => e in t ? pe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var J = (t, e, n) => he(t, typeof e != "symbol" ? e + "" : e, n);
const H = "horizontal", U = "vertical", Q = "draggable", Wt = "droppable", Ot = "handler-class", _t = "dragging", Xt = "dragging-handler-class", Yt = "dropping", ne = "grabbing", me = "grab", Zt = "disable-transition", Se = (t, e) => {
const n = (c) => t.removeAtEvent(c), s = (c, l) => t.insertEvent(c, l), o = () => t.getLength(), i = (c) => t.getValue(c);
return {
direction: (e == null ? void 0 : e.direction) ?? U,
handlerSelector: (e == null ? void 0 : e.handlerSelector) ?? Q,
draggingClass: (e == null ? void 0 : e.draggingClass) ?? "dragging",
droppableClass: (e == null ? void 0 : e.droppableClass) ?? "droppable-hover",
isDraggable: (e == null ? void 0 : e.isDraggable) ?? (() => !0),
onDragStart: (e == null ? void 0 : e.onDragStart) ?? (() => {
}),
onDragEnd: (e == null ? void 0 : e.onDragEnd) ?? (() => {
}),
droppableGroup: e == null ? void 0 : e.droppableGroup,
onRemoveAtEvent: n,
onInsertEvent: s,
onGetLegth: o,
onGetValue: i,
animationDuration: (e == null ? void 0 : e.animationDuration) ?? 150,
removingClass: (e == null ? void 0 : e.removingClass) ?? "removing",
insertingFromClass: (e == null ? void 0 : e.insertingFromClass) ?? "from-inserting",
delayBeforeRemove: (e == null ? void 0 : e.delayBeforeRemove) ?? 200,
delayBeforeInsert: (e == null ? void 0 : e.delayBeforeInsert) ?? 200
};
}, et = (t, e) => t.classList.contains(e), vt = (t, e, n = !1) => {
t.classList.toggle(e, n);
}, nt = (t, e) => {
t.classList.add(e);
}, yt = (t, e) => {
t.classList.remove(e);
}, De = (t, e) => Ct(e).every(
(n) => et(t, n)
), gt = (t) => t ? `.${Ct(t).join(".")}` : "", be = (t, e) => {
if (!e)
return;
const n = Ct(e);
t.classList.add(...n);
}, Ct = (t) => t ? t.split(" ").filter((e) => e) : [], ve = () => {
const { scrollX: t, scrollY: e } = window;
return { scrollX: t, scrollY: e };
}, qt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), Te = (t) => t ? parseInt(t) : -1, Ee = (t) => {
const e = getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
return {
x: n.m41,
y: n.m42
};
}, se = (t, e) => t.x1 > e.x1 ? se(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, dt = (t, e) => !ye(t, e), ye = (t, e) => {
const n = Mt(t), s = Mt(e), o = Jt(n, s, U), i = Jt(n, s, H);
return o >= Math.min(n.height, s.height) / 2 && i >= Math.min(n.width, s.width) / 2;
}, Jt = (t, e, n) => {
const { before: s, distance: o } = w(n);
return se(
{
x1: t[s],
x2: t[s] + t[o]
},
{
x1: e[s],
x2: e[s] + e[o]
}
);
}, L = (t, e) => t ? qt(getComputedStyle(t)[e]) : 0, Kt = (t) => {
const { scrollLeft: e, scrollTop: n } = t;
return { scrollLeft: e, scrollTop: n };
}, Mt = (t) => t.getBoundingClientRect(), w = (t) => {
const e = t == H;
return {
beforeMargin: e ? "marginLeft" : "marginTop",
afterMargin: e ? "marginRight" : "marginBottom",
borderBeforeWidth: e ? "borderLeftWidth" : "borderTopWidth",
before: e ? "left" : "top",
after: e ? "right" : "down",
gap: e ? "columnGap" : "rowGap",
distance: e ? "width" : "height",
axis: e ? "x" : "y",
offset: e ? "offsetX" : "offsetY",
scroll: e ? "scrollX" : "scrollY",
scrollElement: e ? "scrollLeft" : "scrollTop",
page: e ? "pageX" : "pageY",
inner: e ? "innerWidth" : "innerHeight",
offsetElement: e ? "offsetLeft" : "offsetTop",
scrollDistance: e ? "scrollWidth" : "scrollHeight",
clientDistance: e ? "clientWidth" : "clientHeight",
paddingBefore: e ? "paddingLeft" : "paddingTop",
getRect: Mt
};
}, Rt = (t, e) => Ce(t, e), oe = (t) => [...t.children].filter(
(n) => et(n, Q)
), Ce = (t, e) => {
const n = [...e.children].filter(
(o) => et(o, Q) && !o.isEqualNode(t)
).toReversed(), s = [...e.children].findLastIndex(
(o) => o.isEqualNode(t)
);
return [
n,
s,
e
];
}, Ae = (t) => {
let e = t.parentElement;
for (; e; ) {
if (window.getComputedStyle(e).position === "fixed")
return e;
e = e.parentElement;
}
return null;
}, re = (t, e) => {
const {
before: n,
borderBeforeWidth: s
} = w(e), o = Ae(t);
return o ? Mt(o)[n] + L(o, s) : 0;
}, It = (t) => window.TouchEvent && t instanceof TouchEvent, at = (t) => t instanceof HTMLElement, ie = (t) => t instanceof MouseEvent, xe = ["onmouseup", "onmousedown", "onmousemove"], we = (t, e, n) => {
t && (t.style.height = `${e}px`, t.style.width = `${n}px`);
}, Tt = (t, e, n) => {
!t || !at(t) || (n == 0 && e == 0 ? t.style.transform = "" : t.style.transform = `translate(${n}px,${e}px)`);
}, Be = (t, e, n) => {
t[e] = (s) => {
if (s.defaultPrevented)
return;
const o = Vt(s);
n(o);
};
}, $t = (t, e, n) => {
n && (Re(e) ? t[e] = n : Be(t, e, n));
}, Re = (t) => xe.includes(t), Le = (t) => {
const { target: e } = t;
return {
clientX: 0,
clientY: 0,
pageX: 0,
pageY: 0,
screenX: 0,
screenY: 0,
target: e,
offsetX: 0,
offsetY: 0
};
}, Oe = (t, e) => {
const n = (s, o) => Pe(e, window, o, s);
if (ie(t)) {
const { offsetX: s, offsetY: o } = t;
return [s, o];
} else {
const s = t.target;
return [
n(s, H),
n(s, U)
];
}
}, Vt = (t) => {
const e = Me(t);
if (!e)
return Le(t);
const [n, s] = Oe(t, e), { clientX: o, clientY: i, pageX: c, pageY: l, screenX: f, screenY: p, target: h } = e;
return {
clientX: o,
clientY: i,
pageX: c,
pageY: l,
screenX: f,
screenY: p,
target: h,
offsetX: n,
offsetY: s
};
}, Me = (t) => {
if (It(t))
return t.touches[0] ?? t.changedTouches[0];
if (ie(t))
return t;
}, Pe = (t, e, n, s) => {
const { page: o, scroll: i, before: c, borderBeforeWidth: l, getRect: f } = w(n), p = f(s);
return t[o] - e[i] - p[c] - L(s, l);
}, Nt = (t, e, n = "ease-out", s = "transform") => {
at(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${s}`);
}, ce = (t, e, n) => {
!t || !at(t) || (t[e] = () => {
n();
});
}, Ne = (t) => {
var e = t.querySelector("style");
if (!e) {
var n = document.createElement("style");
return t.appendChild(n), n;
}
return e;
}, Fe = (t, e) => {
const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [s] = e.match(n) || [];
for (const o of t.cssRules) {
const [i] = o.cssText.match(n) || [];
if (s === i)
return !0;
}
return !1;
}, $e = (t, e) => {
e.forEach((n) => {
Ge(t, n);
});
}, Ge = (t, e) => {
var s;
var n = Ne(t);
n.sheet && (Fe(n.sheet, e) || (s = n.sheet) == null || s.insertRule(e, n.sheet.cssRules.length));
}, ae = (t, e = {}) => {
for (const n of Object.keys(e)) {
const s = e[n];
s != null && We(t, `--${n}`, s);
}
}, We = (t, e, n) => t && t.style.setProperty(e, n), Xe = (t, e, n) => {
n != 0 && (e === "vertical" ? t.scrollBy(0, n) : t.scrollBy(n, 0));
}, Ye = (t, e, n) => {
const { scrollDistance: s, clientDistance: o, scrollElement: i } = w(t);
return n[i] / (e[s] - e[o]);
}, Ie = (t) => {
let e = { offsetX: 0, offsetY: 0 }, n = { top: 0, left: 0 }, s = { x: 0, y: 0 };
const o = (f) => {
t.style.transform = `translate( ${f.x}px, ${f.y}px)`;
}, i = (f) => {
t.style.top = `${f.top}px`, t.style.left = `${f.left}px`;
};
return [
(f, p, h, v) => {
const B = (D) => {
const {
beforeMargin: b,
borderBeforeWidth: R,
before: N,
offset: W,
scroll: X,
page: Y,
inner: F,
distance: st,
axis: _,
getRect: P
} = w(D), k = h[Y], q = window[X], z = window[F], I = P(f)[st], j = L(f, R), V = L(f, b), $ = k - e[W], tt = re(f, D);
if ($ >= q - I / 2 && $ <= q + z) {
const lt = $ - n[N] - j - V - q - tt;
return M(D), lt;
}
return s[_];
}, M = (D) => {
if (f && et(f, _t) && D === v) {
const { before: b, distance: R, axis: N, getRect: W } = w(v), X = W(f)[R], Y = W(p), F = n[b] - Y[b] + s[N], _ = Y[R] - X, P = F / _, k = X / _, q = 0.1, z = 0.2, I = 0.8;
let j = 0;
const V = dt(f, p);
!V && P < z && P > -k ? j = P / z - 1 : !V && P > I && P < 1 + k && (j = 1 / (1 - I) * (P - I));
const $ = q * X * j;
Xe(p, v, $);
}
}, S = (D) => {
const { axis: b } = w(D);
s[b] = B(D), o(s);
};
S(H), S(U);
},
(f, p) => {
const [h, v, B, M] = _e(
f,
p,
t
);
n = {
top: h,
left: v
}, i(n), e = { offsetX: B, offsetY: M };
}
];
}, Lt = (t, e, n) => {
const { borderBeforeWidth: s, before: o, getRect: i } = w(t);
return i(e)[o] - i(n)[o] - L(n, s);
}, Ve = (t, e) => {
let { offsetX: n, offsetY: s, target: o } = t, i = He(o, e);
const c = o;
return c && i && !c.isSameNode(i) && (n += Lt(H, c, i), s += Lt(U, c, i)), i && e != o && (n += Lt(H, i, e), s += Lt(U, i, e)), [n, s];
}, He = (t, e) => {
const n = t == null ? void 0 : t.closest(`.${Ot}`);
return n && n.isSameNode(e) ? t : n;
}, Qt = (t, e, n, s) => {
const { offset: o, beforeMargin: i, page: c, borderBeforeWidth: l, scroll: f } = w(t), p = re(n, t);
return e[c] - s[o] - L(n, i) - L(n, l) - window[f] - p;
}, _e = (t, e, n) => {
const [s, o] = Ve(t, n);
return [
Qt(U, t, e, {
offsetX: s,
offsetY: o
}),
Qt(H, t, e, {
offsetX: s,
offsetY: o
}),
s,
o
];
}, le = "startDrag", Pt = "drag", zt = "startDrop", qe = "drop", pt = "temp-child", ue = "cubic-bezier(0.2, 0, 0, 1)", ze = (t) => t === qe || t === zt, Ht = (t) => !t || t.length == 0 ? 0 : qt(t.replace("px", "")), je = (t, e) => {
const n = getComputedStyle(t)[e];
if (n.match("%")) {
const o = qt(n.replace("%", "")), { width: i } = t.getBoundingClientRect();
return i * (o / 100);
}
return Ht(n);
}, jt = (t, e) => {
if (!(t instanceof Element))
return [
0,
!1
];
const n = je(t, e), s = getComputedStyle(t).display, o = n > 0 || s === "flex";
return [n, o];
}, ke = (t) => {
const { top: e, left: n } = getComputedStyle(t);
return [Ht(e), Ht(n)];
}, Ze = (t, e) => {
const { gap: n } = w(e), [s, o] = jt(t, n);
return o ? s : 0;
};
function Et(t, e, n, s, o = t.previousElementSibling, i = t.nextElementSibling) {
let { height: c, width: l } = Je(
n,
t,
o,
i
);
return dt(t, s) && e == Pt && (c = 0, l = 0), { height: c, width: l };
}
const Je = (t, e, n, s) => {
const {
afterMargin: o,
beforeMargin: i,
distance: c,
gap: l,
getRect: f
} = w(t), p = L(e, o), h = L(e, i), v = L(s, i), [B, M] = jt(
e.parentElement,
l
), S = f(e)[c];
if (M)
return Ut(S, h, p, B, 0, t);
const [D, b, R] = Ke(
n,
v,
p,
h,
o
);
return Ut(S, b, D, 0, R, t);
}, Ke = (t, e, n, s, o) => {
const i = Math.max(e, n);
let c = s, l = e;
if (t) {
const f = L(
t,
o
);
c = Math.max(f, s), l = Math.max(l, f);
}
return [i, c, l];
}, Ut = (t, e, n, s, o, i) => Qe(i, t + e + n + s - o), Qe = (t, e) => t == H ? { width: e, height: 0 } : { width: 0, height: e }, te = (t, e) => {
const {
borderBeforeWidth: n,
paddingBefore: s,
axis: o,
getRect: i
} = w(t), c = L(e, n), l = L(e, s), f = i(e)[o];
return c + l + f;
}, Ue = (t, e) => {
const [n, s] = ke(e), o = te(U, t);
return [
te(H, t) - s,
o - n
];
};
function tn(t, e, n, s, o, i, c, l, f) {
let p = 0, h = 0;
const v = !!(n < 0 && f);
if (n === s && !v)
return ee(
{ height: p, width: h },
t,
o,
c,
v
);
const [B, M, S, D] = sn(e, n, s, f);
if (v) {
const [tt, ot] = Ue(l, f);
p += ot, h += tt;
}
const {
scrollElement: b,
beforeMargin: R,
afterMargin: N,
distance: W,
gap: X
} = w(t), [Y, F] = jt(l, X), [
st,
_,
P
] = rn(
R,
N,
B,
M == null ? void 0 : M.previousElementSibling,
D,
F,
v
), [k, q, z] = on(
R,
N,
W,
S,
Y,
F
), I = nn(
q,
k,
z,
_,
st,
Y
), j = v ? l[b] : en(b, l, i), $ = (D ? I - P : P - I) - j;
return t === U ? p += $ : t === H && (h += $), ee(
{ height: p, width: h },
t,
o,
c,
v
);
}
const en = (t, e, n) => {
const s = e[t], o = n[t];
return s - o;
}, nn = (t, e, n, s, o, i) => {
const c = Math.max(e, o);
return Math.max(n, s) + t + c + i;
}, sn = (t, e, n, s) => {
const o = e < n, [i, c] = [e, n].toSorted(
(h, v) => h - v
), l = t[e] ?? s, f = t[n];
let p = o ? t.slice(i + 1, c + 1) : t.slice(i, c);
return i < 0 && s && (p = t.slice(i + 1, c)), [
l,
f,
p,
o
];
}, on = (t, e, n, s, o, i) => {
if (s.length == 0)
return [0, 0, 0];
const c = L(s[0], t);
let l = 0, f = -c;
for (const [p, h] of s.entries()) {
const v = h.getBoundingClientRect()[n], B = L(h, t);
i && (l += B), i && p > 0 ? l += o : l = Math.max(l, B), f += l + v, l = L(h, e);
}
return [c, f, l];
}, ee = (t, e, n, s, o) => {
const { scroll: i, distance: c } = w(e), l = window[i], f = n[i], p = o ? 0 : f - 2 * l + s[i];
return t[c] += p, t;
}, rn = (t, e, n, s, o, i, c) => {
const l = o ? n.previousElementSibling : s;
return cn(
t,
e,
l,
n,
i,
c
);
}, cn = (t, e, n, s, o, i) => {
if (o)
return [0, 0, 0];
const c = L(
i ? null : n,
e
), l = L(s, t);
let f = Math.max(c, l);
return [c, l, f];
}, kt = (t, e, n) => {
const s = new MutationObserver((o) => {
o.forEach((i) => {
t(s, i);
});
});
return s.observe(e, n), s;
}, an = "startDrag", fe = "cubic-bezier(0.2, 0, 0, 1)", ln = (t, e, n) => {
let s = Et(
e,
an,
n,
t
);
const o = Ze(t, n), { distance: i } = w(n);
s[i] -= o;
const [c, l] = un(n, e);
return s[l] = c, s;
}, un = (t, e) => {
const n = t == H ? U : H, { distance: s, getRect: o } = w(n);
return [
o(e)[s],
s
];
}, ht = (t, e, n) => {
we(t, e, n), t.style.minWidth = `${n}px`;
}, fn = (t, e, n) => (s) => {
e.contains(t) && (ht(t, n.height, n.width), s.disconnect());
}, gn = (t, e) => {
if (!e)
return;
const { droppable: n, config: s, scroll: o } = t, { direction: i } = s, c = Ye(s.direction, n, o) > 0.99, { scrollDistance: l, clientDistance: f, scrollElement: p } = w(i);
c && (n[p] = n[l] - n[f]);
}, ge = (t, e, n, s) => {
if (!n)
return;
const { droppable: o, config: i } = n, { direction: c, animationDuration: l } = i;
if (gn(n, e), o.querySelector(`.${pt}`) || !t)
return;
var f = t.tagName == "LI" ? "DIV" : t.tagName, p = document.createElement(f);
nt(p, pt), ht(p, 0, 0);
const h = ln(o, t, c);
return Nt(
p,
l,
fe,
"width, min-width, height"
), [p, h, o];
}, Gt = (t, e, n, s, o) => {
const i = ge(t, n, s);
if (!i)
return;
const [c, l, f] = i;
e.isSameNode(f) && ht(c, l.height, l.width), kt(
fn(c, f, l),
f,
{
childList: !0,
subtree: !0
}
), f.appendChild(c);
}, dn = (t, e, n) => {
const s = ge(t, e, n);
if (!s)
return;
const [o, i, c] = s;
c.appendChild(o), pn(o, i);
}, pn = (t, e) => requestAnimationFrame(() => {
ht(t, e.height, e.width), requestAnimationFrame(() => {
Nt(
t,
0,
fe,
"width, min-width, height"
);
});
}), hn = (t, e, n, s, o = !0) => {
if (n) {
var i = document.querySelectorAll(
`${gt(n)} > .${pt}`
);
i.forEach((c) => {
const l = c.parentElement;
if (l != null && l.isSameNode(e) || !o && (l != null && l.isSameNode(t)))
return;
ht(c, 0, 0), setTimeout(() => {
var p;
(p = c.parentNode) == null || p.removeChild(c);
}, s);
});
}
}, bt = (t, e, n = !1) => {
var s = t.querySelectorAll(`.${pt}`);
s.forEach((o) => {
n ? (ht(o, 0, 0), setTimeout(() => {
t.contains(o) && t.removeChild(o);
}, e)) : t.removeChild(o);
});
}, mn = 50;
function Sn(t, e, n, s, o, i) {
let c = e;
const {
direction: l,
handlerSelector: f,
onRemoveAtEvent: p,
animationDuration: h,
delayBeforeInsert: v,
draggingClass: B
} = t, M = (r, u, g, m, C) => {
if (!m)
return;
const { droppable: T, config: E } = m, A = Et(
r,
u,
E.direction,
T
);
ze(u) ? F(
r,
u,
A,
g,
m,
C
) : R(
r,
u,
A,
m
);
}, S = (r, u, g, m, C) => {
const T = Et(
u,
"insert",
t.direction,
g
), { onInsertEvent: E } = t, A = oe(g);
for (const [O, x] of A.entries())
et(x, Q) && O >= r && Y(x, T);
C(), setTimeout(() => {
E(r, m), bt(n, 0, !0), Dn(r, g, t), tt(u), V(u, n);
}, v);
}, D = (r, u, g, m) => {
if (!g || !g.droppable || !g.config)
return;
const { droppable: C, config: T } = g;
let [E] = Rt(u, C);
E = [u, ...E].toReversed();
const A = Et(
u,
"remove",
T.direction,
C
);
for (const [O, x] of E.entries())
O >= r && (X(x, A), setTimeout(() => {
m(x);
}, h));
}, b = (r) => {
bt(n, h, !0), setTimeout(() => {
tt(r), V(r, n);
}, h);
}, R = (r, u, g, m) => {
const { config: C, droppable: T } = m, [E] = Rt(r, T), A = dt(r, T);
E.length == 0 && W(
g,
1,
C.direction,
E
);
for (const [O, x] of E.entries()) {
if (!et(x, Q))
continue;
const G = N(
C.direction,
r,
x,
g
);
if (!A && G)
g = G;
else if (!A)
continue;
const Z = E.length - O;
W(
g,
Z,
C.direction,
E
), u === le ? X(x, g) : u === Pt && Y(x, g);
}
}, N = (r, u, g, m) => {
const { before: C, distance: T, axis: E, getRect: A } = w(r), O = A(u), x = A(g), G = O[C], Z = x[C], ut = x[T], mt = Z + ut / 2, St = Ee(g)[E], ct = mt - St;
return G > ct ? { height: 0, width: 0 } : m;
}, W = (r, u, g, m) => {
const C = m.filter(
(E) => et(E, Q)
).length, { distance: T } = w(g);
r[T] == 0 ? c = Math.max(c, u) : c = Math.min(c, u - 1), c = Math.min(c, C);
}, X = (r, u) => {
const { width: g, height: m } = u;
Tt(r, m, g);
}, Y = (r, u) => {
const { width: g, height: m } = u;
Tt(r, m, g), Nt(r, h, ue);
}, F = (r, u, g, m, C, T) => {
const { droppable: E, scroll: A, config: O } = C, [x, G] = Rt(
r,
E
), Z = x.toReversed(), ut = G === -1 ? Z.length : G;
Z.splice(ut, 0, r);
const [mt, St, ct] = st(
r,
G,
Z,
E
);
g = Et(
r,
u,
O.direction,
n,
mt,
St
);
const Ft = ve(), At = tn(
O.direction,
Z,
G,
ct,
Ft,
A,
m,
E,
r
);
x.length == 0 && _(
void 0,
g,
r,
At
);
for (const [xt, wt] of x.toReversed().entries()) {
let Bt = g;
ct - 1 >= xt && (Bt = { height: 0, width: 0 }), u === zt && !et(wt, pt) && _(
wt,
Bt,
r,
At
);
}
P(
ct,
r,
O,
E,
T
);
}, st = (r, u, g, m) => {
const T = dt(r, m) ? u : c, E = () => u < T ? [T, T + 1] : u > T ? [T - 1, T] : [T - 1, T + 1], [A, O] = E(), x = g[A] ?? null, G = g[O] ?? null;
return [
x,
G,
T
];
}, _ = (r, u, g, m) => {
Tt(r, u.height, u.width), Tt(
g,
m.height,
m.width
);
}, P = (r, u, g, m, C) => {
const { onInsertEvent: T, onDragEnd: E } = g;
nt(u, Yt), z(u, n, m, () => {
if (yt(u, Yt), C != null) {
const A = p(C);
A != null && (T(r, A), E({ value: A, index: r })), q(u), k();
}
});
}, k = () => {
if (s) {
var r = document.querySelectorAll(
`${gt(s)} > .${Q}`
);
for (const u of r)
$(u);
}
}, q = (r) => {
setTimeout(() => {
yt(r, B);
}, mn);
}, z = (r, u, g, m) => {
setTimeout(() => {
m && m(), I(u, g), j(g), tt(r), V(r, u), V(r, g);
}, h);
}, I = (r, u) => {
r.isSameNode(u) ? bt(r, h) : (bt(r, h, !0), bt(u, h));
}, j = (r) => {
if (n.isSameNode(r))
return;
var [u] = n.querySelectorAll(`.${pt}`);
if (!u)
return;
const { distance: g } = w(l);
at(u) && (u.style[g] = "0px");
}, V = (r, u) => {
const [g] = Rt(r, u);
for (const m of [...g, r])
$(m);
}, $ = (r) => {
at(r) && (r.style.transition = "", r.style.transform = "");
}, tt = (r) => {
i(), lt(r, !1), r.style.transform = "", r.style.transition = "", r.style.top = "", r.style.left = "", ae(r, {
fixedHeight: "",
fixedWidth: ""
});
}, ot = (r, u) => {
const g = u.querySelector(f);
vt(document.body, ne, r), vt(g || u, Xt, r);
}, lt = (r, u) => {
vt(r, _t, u), ot(u, r), o.toggleGrabClass(!u);
};
return [
M,
D,
S,
b,
lt
];
}
const Dn = (t, e, n) => {
const { insertingFromClass: s, animationDuration: o } = n, i = kt(() => {
const l = oe(e)[t];
nt(l, s), nt(l, Zt), setTimeout(() => {
yt(l, Zt), yt(l, s), i.disconnect();
}, o);
}, e, {
childList: !0
});
}, K = class K {
static addConfig(e, n) {
const s = K.configs.filter(
(i) => !i.droppable.isSameNode(e)
), o = Kt(e);
s.push({
droppable: e,
config: n,
scroll: o
}), K.configs = s;
}
static updateScrolls(e, n) {
for (const s of K.configs) {
const { droppable: o } = s;
(n && De(o, n) || o.isSameNode(e)) && (s.scroll = Kt(o));
}
}
static getConfig(e) {
return K.configs.find(
({ droppable: s }) => s.isSameNode(e)
);
}
};
J(K, "configs", []), J(K, "removeObsoleteConfigs", () => {
const e = K.configs.filter(
({ droppable: n }) => document.contains(n)
);
K.configs = e;
});
let it = K;
class bn {
constructor(e, n, s, o, i) {
J(this, "initial");
J(this, "current");
J(this, "parent");
J(this, "draggableElement");
J(this, "groupClass");
J(this, "dragEvent");
J(this, "changeDroppable");
this.parent = s, this.draggableElement = e, this.groupClass = n, this.dragEvent = o, this.initial = s ? it.getConfig(s) : void 0, this.changeDroppable = i;
}
getDraggableAncestor(e, n, s) {
return document.elementsFromPoint(e, n).filter((o) => !o.isSameNode(s));
}
getElementBelow(e, n, s = !0) {
const o = (c) => {
const [l] = c.getDraggableAncestor(
n.clientX,
n.clientY,
e
);
return l;
};
let i = null;
return s ? (e.hidden = !0, i = o(this), e.hidden = !1) : i = o(this), i;
}
getCurrent(e, n, s = !0) {
const o = this.getElementBelow(e, n, s);
return !this.groupClass || !o ? void 0 : o.closest(
gt(this.groupClass)
);
}
isOutsideOfAllDroppables(e) {
return (this.groupClass ? Array.from(
document.querySelectorAll(gt(this.groupClass))
) : [this.parent]).every(
(s) => dt(e, s)
);
}
isNotInsideAnotherDroppable(e, n) {
return !dt(e, n) || this.isOutsideOfAllDroppables(e);
}
onScrollEvent() {
this.dragEvent();
}
setOnScroll(e) {
ce(e, "onscroll", () => {
this.onScrollEvent();
});
}
getCurrentConfig(e) {
var o;
const n = this.draggableElement;
if (this.current && this.isNotInsideAnotherDroppable(
n,
(o = this.current) == null ? void 0 : o.droppable
))
return this.current;
const s = this.getCurrent(n, e);
return s ? (at(s) && !s.onscroll && this.setOnScroll(s), it.getConfig(s)) : it.getConfig(this.parent);
}
updateConfig(e) {
const n = this.current;
this.current = this.getCurrentConfig(e), this.changeDroppable(this.current, n);
}
isOutside(e, n = !0) {
const s = this.draggableElement;
return !this.getCurrent(s, e, n);
}
}
function vn(t, e, n, s, o) {
const {
handlerSelector: i,
isDraggable: c,
droppableGroup: l,
animationDuration: f,
delayBeforeRemove: p,
draggingClass: h,
removingClass: v,
onRemoveAtEvent: B,
droppableClass: M,
onDragStart: S
} = n, D = Ct(l).map((a) => `droppable-group-${a}`).join(" ");
let b = 0, R = {
scrollX: 0,
scrollY: 0
}, N = { pageX: 0, pageY: 0 }, W;
const [X, Y] = Ie(
t
), [
F,
st,
_,
P,
k
] = Sn(
n,
e,
s,
D,
o,
() => b = 0
/* NOT_DRAGGING */
), q = () => {
nt(t, Q);
}, z = (a) => {
nt(a, Ot), o.addSubscriber(a);
}, I = () => {
if (c(t)) {
const a = t.querySelector(i);
z(a || t);
}
}, j = () => {
$e(document.body, [
`.${Q}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,
`.${Ot}{pointer-events:auto!important;}`,
`.${me}{cursor:grab;}`,
".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",
".droppable{box-sizing:border-box!important;}",
`.${_t}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,
`.${Xt}{pointer-events:none!important;}`,
`.${Yt}{pointer-events:none!important;}`,
`.${ne}{cursor:grabbing;}`,
".disable-transition{transition:none!important;}"
]), I(), q();
}, V = (a) => {
const d = a == null ? void 0 : a.querySelector(`.${Ot}`), y = d == null ? void 0 : d.parentElement;
return d && y && et(y, Wt) && !y.isSameNode(s) ? null : d;
}, $ = (a) => {
const d = V(a) ?? a;
d && c(a) && ($t(
d,
"onmousedown",
O("mousemove", "mouseup")
), $t(
d,
"ontouchstart",
O("touchmove", "touchend")
), tt(d)), a != null && a.isSameNode(d) || $t(a, "onmousedown", x), nt(s, Wt);
}, tt = (a) => {
const d = a.querySelectorAll("img");
Array.from(d).forEach((y) => {
y.onmousedown = () => !1;
});
}, ot = () => {
if (N.pageX == 0 && N.pageY == 0 || !r.current)
return;
const { droppable: a, config: d } = r.current;
X(t, a, N, d.direction), F(
t,
Pt,
R,
r.current
);
}, lt = (a, d) => {
d && b == 2 && !(a != null && a.droppable.isSameNode(d.droppable)) && F(
t,
Pt,
R,
d
);
}, r = new bn(
t,
D,
s,
ot,
lt
), u = (a) => {
if (!r.current)
return;
const d = D ? Array.from(
document.querySelectorAll(gt(D))
) : [s];
for (const y of d)
y.classList.toggle(
M,
!a && y.isSameNode(r.current.droppable)
);
}, g = (a) => {
r.updateConfig(a);
const d = r.isOutside(a);
u(d), b === 1 ? ut(a) : b === 2 && (m(d), St(a));
}, m = (a = !0) => {
if (!r.current)
return;
const { droppable: d } = r.current;
hn(
d,
s,
D,
f,
a
), !a && Gt(
t,
s,
b == 1,
r.current
);
}, C = (a) => {
if (It(a) && a.cancelable)
a.preventDefault();
else if (It(a))
return;
const d = Vt(a);
g(d);
}, T = (a, d) => {
a == "touchmove" ? W = setTimeout(() => {
d();
}, 200) : d();
}, E = (a, d) => {
const { clientX: y, clientY: ft } = a, rt = document.elementFromPoint(y, ft), Dt = rt == null ? void 0 : rt.closest(`.${Q}`);
return rt && d && Dt && !d.isSameNode(Dt);
}, A = (a) => {
const d = n.onGetValue(e);
return { index: e, element: a, value: d };
}, O = (a, d) => (y) => {
if (E(y, t))
return;
it.updateScrolls(s, D);
const { scrollX: ft, scrollY: rt } = window;
if (R = { scrollX: ft, scrollY: rt }, b === 0) {
b = 1;
const Dt = A(t);
Dt && S(Dt), T(a, () => {
a == "touchmove" && (r.updateConfig(y), u(r.isOutside(y)), ut(y)), document.addEventListener(a, C, {
passive: !1
});
}), ct(s), document.addEventListener(d, G(a), {
once: !0
});
}
}, x = (a) => r.updateConfig(a), G = (a) => (d) => {
u(!0);
const y = Vt(d);
clearTimeout(W), At(r.isOutside(y, !1)), document.removeEventListener(a, C), r.updateConfig(y);
const ft = r.getCurrentConfig(y);
if (ft) {
const { droppable: rt } = ft;
Z(rt);
}
s.onscroll = null;
}, Z = (a) => {
if (a.onscroll = null, !D)
return;
const d = Array.from(
document.querySelectorAll(gt(D))
);
for (const y of d)
at(y) && (y.onscroll = null);
}, ut = (a) => {
Gt(
t,
s,
b == 1,
r.current
), mt(), F(
t,
le,
R,
r.current
), wt(t), Y(a, t);
}, mt = () => {
b = 2;
}, St = (a) => {
const { pageX: d, pageY: y } = a;
N = { pageX: d, pageY: y }, ot();
}, ct = (a) => ce(a, "onscroll", Ft), Ft = () => ot(), At = (a) => {
if (b !== 2) {
b = 0;
return;
}
b = 3, xt(t), F(
t,
zt,
R,
a ? r.initial : r.current,
e
);
}, xt = (a) => {
Nt(a, f, ue), Tt(a, 0, 0);
}, wt = (a) => {
const { height: d, width: y } = a.getBoundingClientRect();
ae(a, {
fixedHeight: `${d}px`,
fixedWidth: `${y}px`
}), k(a, !0), vt(a, h, !0), a.style.transition = "";
}, Bt = (a) => {
if (!r.initial)
return;
const d = r.initial;
a == e && (nt(t, v), setTimeout(() => {
B(e), yt(t, v), Gt(
t,
s,
b == 1,
r.initial
), st(
a,
t,
d,
(y) => {
xt(y), P(t);
}
);
}, p));
}, de = (a, d) => {
(a === e || a === n.onGetLegth() && e === a - 1) && _(
a,
t,
s,
d,
() => {
dn(
t,
b == 1,
r.initial
);
}
);
};
return j(), $(t), [Bt, de];
}
const Tn = (t, e) => {
t && be(e, t);
};
function En(t, e, n, s = "index") {
const o = s;
let i = [], c = [];
const { droppableGroup: l } = t;
if (!n)
return [
i,
c
];
const f = Ct(l).map((p) => `droppable-group-${p}`).join(" ");
Tn(f, n);
for (const p of n.children) {
const h = p.getAttribute(o), v = Te(h), B = p;
if (B && v >= 0) {
const [M, S] = vn(
B,
v,
t,
n,
e
);
i.push(M), c.push(S);
}
}
return [
i,
c
];
}
function Cn(t, e, n, s = "index") {
let o = [], i = [];
const c = Se(t, n), l = (S) => {
for (const D of o)
D(S);
}, f = (S, D) => {
if (c.onGetLegth() === 0)
t.insertToListEmpty(c, S, D);
else
for (const R of i)
R(S, D);
}, p = (S) => {
const [D, b] = En(c, e, S, s);
o = D, i = b;
}, h = (S) => {
kt(
() => {
p(S);
},
S,
{ childList: !0 }
);
}, v = (S) => {
nt(S, Wt);
}, B = (S) => {
it.addConfig(
S,
c
);
};
return [l, f, (S) => {
S && (v(S), B(S), h(S), p(S), it.removeObsoleteConfigs());
}];
}
export {
Cn as dragAndDrop
};