@dfsj/ec-hooks/dist/browser/useDraggable.js

贵州东方世纪常用 hook。

import { defaults as J, debounce as E } from "lodash-es";
import { ref as v, computed as S, unref as B, reactive as K, watchEffect as N, watch as Q, onBeforeUnmount as V, onMounted as ee, readonly as w } from "vue";
import { useHover as te } from "./useHover.js";
import { useOn as ne } from "./useOn.js";
const H = {
  dragTips: "长按鼠标，可拖动",
  dragZIndex: 10
};
function se(b = H) {
  const c = J(b, H), a = v(!0), I = S(() => !a.value), P = S(() => B(a) ? c.dragTips : ""), { setHoverEle: Z, isHover: $ } = te({
    in: (e) => {
      e && (e.title = P.value);
    },
    out: (e) => {
      e && (e.title = "");
    }
  }), r = K({ left: "auto", top: "auto" }), y = v(!1), n = v(null), A = (e) => {
    n.value || !e || (n.value = e);
  }, t = v(null), T = (e) => {
    e && (t.value = e);
  }, s = {
    minX: 0,
    minY: 0,
    maxX: 0,
    maxY: 0
  }, l = v(null), z = (e) => {
    e && (l.value = e);
  };
  let f = !1;
  N(G, {
    flush: "post"
  }), z(document.body), Q(
    [l, t],
    () => {
      q(), F();
    },
    {
      flush: "post"
    }
  );
  let d, m;
  V(() => {
    n.value && n.value.removeEventListener("mouseup", C), d && l.value && d.unobserve(l.value), m && t.value && m.unobserve(t.value);
  });
  let X = 0, Y = 0, L = "", x = "";
  const U = E(() => {
    t.value && l.value && h(l.value, t.value);
  }, 300), { setOnEle: W } = ne("resize", U);
  return ee(() => {
    W(window);
  }), {
    /**
     * 设置拖动元素
     */
    setDragEle: A,
    /**
     * 设置限制拖动范围的元素
     */
    setExtentEle: z,
    /**
     * 是否正在拖动
     */
    dragging: w(y),
    /**
     * 元素的位置
     */
    position: w(r),
    /**
     * 设置拖动时需要定位的元素, 默认为拖动元素
     */
    setPositionEle: T,
    /**
     * 是否固定，固定后不可拖动
     * 值和 isDraggable 相反
     */
    isPanned: I,
    /**
     * 是否可拖动
     */
    isDraggable: w(a),
    /**
     * 禁用拖动
     */
    disableDraggable: j,
    /**
     * 启用拖动
     */
    enableDraggable: k
  };
  function j() {
    a.value = !1;
  }
  function k() {
    a.value = !0;
  }
  function O(e) {
    if (!n.value || !t.value) return;
    X = e.clientX - n.value.getBoundingClientRect().left, Y = e.clientY - n.value.getBoundingClientRect().top, document.addEventListener("mousemove", R), n.value.addEventListener("mouseup", C);
    const { transition: u, right: o, bottom: i } = t.value.style;
    o !== "auto" && (t.value.style.right = "auto"), i !== "auto" && (t.value.style.bottom = "auto"), D(e), n.value.addEventListener("dragstart", M), document.body.style.userSelect = "none", n.value.style.cursor === "move" && !x && (x = n.value.style.cursor), n.value.style.cursor = "move", L = u, t.value.style.transition = "all 0 ease";
  }
  function R(e) {
    D(e);
  }
  function C(e) {
    !n.value || !t.value || (document.removeEventListener("mousemove", R), n.value.removeEventListener("dragstart", M), document.body.style.userSelect = "", t.value.style.transition = L, n.value.style.cursor = x, y.value = !1);
  }
  function D({ pageX: e, pageY: u }) {
    if (!$ || !n.value || !t.value) return;
    const o = e - X, i = u - Y, g = `${_(o, s.minX, s.maxX)}px`, p = `${_(i, s.minY, s.maxY)}px`;
    r.left = g, r.top = p, y.value = !0, t.value.style.left = g, t.value.style.top = p, t.value.style.zIndex = "" + c.dragZIndex;
  }
  function q() {
    const e = E((u) => {
      const o = u[0].target;
      t.value && h(o, t.value);
    });
    d = new ResizeObserver(e), l.value && d.observe(l.value);
  }
  function F() {
    const e = E((u) => {
      const o = u[0].target;
      l.value && h(l.value, o);
    });
    m = new ResizeObserver(e), t.value && m.observe(t.value);
  }
  function M() {
    return !1;
  }
  function h(e, u) {
    const o = e == null ? void 0 : e.getBoundingClientRect(), i = u == null ? void 0 : u.getBoundingClientRect();
    if (!o || !i) return;
    const { width: g, height: p } = i;
    s.minX = (o == null ? void 0 : o.left) || 0, s.minY = (o == null ? void 0 : o.top) || 0, s.maxX = (o == null ? void 0 : o.right) - g || 0, s.maxY = (o == null ? void 0 : o.bottom) - p || 0;
  }
  function G() {
    if (!B(a) && f && n.value) {
      n.value.removeEventListener("mousedown", O), f = !1;
      return;
    }
    !n.value || f || (t.value || (t.value = n.value), Z(n.value, {}), t.value.style.position = "fixed", r.left = t.value.style.left, r.top = t.value.style.top, n.value.addEventListener("mousedown", O), f = !0);
  }
}
function _(b, c, a) {
  return Math.min(Math.max(b, c), a);
}
export {
  se as useDraggable
};