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

Vue3 Nuxt3 Nuxt4 组件库

import { ref as S, onMounted as j, watchEffect as q, onBeforeUnmount as A } from "vue";
import { Utils as G } from "@vuux/utils";
const N = (o, c, D, T) => {
  const t = {
    offsetX: 0,
    offsetY: 0
  }, f = S(!1), h = (n) => {
    n.type === "touchmove" && n.cancelable && n.preventDefault();
  }, B = (n) => {
    f.value && n.stopPropagation();
  }, i = (n) => {
    document.body.addEventListener("touchmove", h, { passive: !1 });
    const W = "touches" in n ? n.touches[0].clientX : n.clientX, $ = "touches" in n ? n.touches[0].clientY : n.clientY, C = W, k = $, { offsetX: v, offsetY: m } = t, a = o.value.getBoundingClientRect(), p = a.left, E = a.top, U = a.width, z = a.height, F = document.documentElement.clientWidth, I = document.documentElement.clientHeight, L = -p + v, X = -E + m, Y = F - p - U + v, x = I - E - z + m, u = (e) => {
      f.value = !0;
      const r = v + ("touches" in e ? e.touches[0].clientX : e.clientX) - C, s = m + ("touches" in e ? e.touches[0].clientY : e.clientY) - k;
      t.offsetX = Math.min(Math.max(r, L), Y), t.offsetY = Math.min(Math.max(s, X), x), o.value && (o.value.style.transitionDuration = "0s", o.value.style.transform = `translate(${t.offsetX}px, ${t.offsetY}px)`);
    }, l = async () => {
      if (await G.wait(50), f.value = !1, document.body.removeEventListener("touchmove", h), document.removeEventListener("mousemove", u), document.removeEventListener("touchmove", u), document.removeEventListener("mouseup", l), document.removeEventListener("touchend", l), o.value && T?.value) {
        const e = o.value.getBoundingClientRect(), r = document.documentElement.clientWidth, s = document.documentElement.clientHeight, M = e.left, P = r - e.right, d = e.top, b = s - e.bottom, y = s * 0.3, w = s * 0.7;
        d < y ? t.offsetY = -d + t.offsetY : b < s - w && (t.offsetY = s - e.bottom + t.offsetY), d >= y && b >= s - w && (M < P ? t.offsetX = -M + t.offsetX : t.offsetX = r - e.right + t.offsetX), t.offsetX = Math.min(Math.max(t.offsetX, L), Y), t.offsetY = Math.min(Math.max(t.offsetY, X), x), o.value.style.transitionDuration = "0.3s", o.value.style.transitionTimingFunction = "cubic-bezier(0.34, -0.37, 0.73, 1.38)", o.value.style.transform = `translate(${t.offsetX}px, ${t.offsetY}px)`;
      }
    };
    document.addEventListener("mousemove", u), document.addEventListener("touchmove", u), document.addEventListener("mouseup", l), document.addEventListener("touchend", l);
  }, H = () => {
    c.value && o.value && (c.value.addEventListener("mousedown", i), c.value.addEventListener("touchstart", i, { passive: !0 }));
  }, g = () => {
    c.value && o.value && (c.value.removeEventListener("mousedown", i), c.value.removeEventListener("touchstart", i));
  };
  j(() => {
    o.value?.addEventListener("click", B, { capture: !0 }), q(() => {
      D.value ? H() : g();
    });
  }), A(() => {
    g();
  });
};
export {
  N as default
};