vuux/dist/es/Drag/src/drag.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as Y } from "vue";
import { Utils as G } from "@vuux/utils";
const J = (c, g) => {
  const t = c.getBoundingClientRect(), s = g.getBoundingClientRect(), i = [t.top - Math.max(0, s.top), s.right - t.right, Math.min(window.innerHeight, s.bottom) - t.bottom, t.left - s.left].map(Math.abs), a = i.findIndex((E) => E === Math.min(...i)), e = a % 2 === 0 ? "y" : "x";
  return {
    value: i[a] * (a === 0 || a === 3 ? -1 : 1),
    axis: e === "y" ? "offsetY" : "offsetX"
  };
}, V = {
  mounted(c, g) {
    const t = {
      adsorb: !1,
      //用户传入的配置
      ...g.value
    }, s = Y(c), i = Y(!1), a = Y(t.parent && document.querySelector(t.parent) || s.value.parentNode), e = {
      offsetX: 0,
      offsetY: 0
    }, x = (n) => {
      n.type === "touchmove" && n.cancelable && n.preventDefault();
    }, E = (n) => {
      i.value && n.stopPropagation();
    }, L = (n) => {
      n.cancelable && n.preventDefault(), document.body.addEventListener("touchmove", x, { passive: !1 });
      const $ = "touches" in n ? n.touches[0].clientX : n.clientX, k = "touches" in n ? n.touches[0].clientY : n.clientY, S = $, q = k, { offsetX: m, offsetY: u } = e, l = c.getBoundingClientRect(), d = l.left, p = l.top, b = l.width, y = l.height, z = t.parent ? a.value.clientWidth : document.documentElement.clientWidth, N = t.parent ? a.value.clientHeight : document.documentElement.clientHeight, w = -d + m, R = -p + u, T = z - d - b + m, C = N - p - y + u, v = a.value.getBoundingClientRect(), U = v.left, j = v.top, A = v.right, F = v.bottom, D = U - d + m, B = j - p + u, H = A - d - b + m, I = F - p - y + u, O = (o, r, f = "0s") => {
        s.value && (s.value.style.transition = `transform ${f} cubic-bezier(0.34, -0.37, 0.73, 1.38)`, s.value.style.transform = `translate(${o}px, ${r}px)`);
      }, h = (o) => {
        o.cancelable && o.preventDefault(), i.value = !0;
        const r = m + ("touches" in o ? o.touches[0].clientX : o.clientX) - S, f = u + ("touches" in o ? o.touches[0].clientY : o.clientY) - q;
        t.parent ? (e.offsetX = Math.min(Math.max(r, D), H), e.offsetY = Math.min(Math.max(f, B), I)) : (e.offsetX = Math.min(Math.max(r, w), T), e.offsetY = Math.min(Math.max(f, R), C)), O(e.offsetX, e.offsetY);
      }, M = async () => {
        if (await G.wait(50), i.value = !1, document.body.removeEventListener("touchmove", x), document.removeEventListener("mousemove", h), document.removeEventListener("touchmove", h), document.removeEventListener("mouseup", M), document.removeEventListener("touchend", M), s.value && t.adsorb) {
          const { value: o, axis: r } = J(s.value, t.parent ? a.value : document.body), f = e[r] + o, X = r === "offsetX", W = X ? t.parent ? D : w : t.parent ? B : R, P = X ? t.parent ? H : T : t.parent ? I : C;
          X ? e.offsetX = Math.min(Math.max(f, W), P) : e.offsetY = Math.min(Math.max(f, W), P), O(e.offsetX, e.offsetY, "0.3s");
        }
      };
      document.addEventListener("mousemove", h), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("mouseup", M), document.addEventListener("touchend", M), c.addEventListener("touchstart", L, { passive: !0 });
    };
    c.addEventListener("click", E, { capture: !0 }), c.addEventListener("mousedown", L), c.addEventListener("touchstart", L, { passive: !0 });
  }
};
export {
  V as default
};