vue-hooks-plus/lib/useDrag/index.js

Vue hooks library

"use strict";
const vue = require("vue");
const domTarget = require("../utils/domTarget");
const useEffectWithTarget = require("../utils/useEffectWithTarget");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const useEffectWithTarget__default = /* @__PURE__ */ _interopDefaultLegacy(useEffectWithTarget);
const useDrag = (data, target, options = {}) => {
  const optionsRef = vue.ref(options);
  useEffectWithTarget__default.default(
    () => {
      const targetElement = domTarget.getTargetElement(target);
      if (!(targetElement == null ? void 0 : targetElement.addEventListener)) {
        return;
      }
      const onDragStart = (event) => {
        var _a, _b, _c;
        (_b = (_a = optionsRef.value).onDragStart) == null ? void 0 : _b.call(_a, event);
        (_c = event.dataTransfer) == null ? void 0 : _c.setData("custom", JSON.stringify(data));
      };
      const onDragEnd = (event) => {
        var _a, _b;
        (_b = (_a = optionsRef.value).onDragEnd) == null ? void 0 : _b.call(_a, event);
      };
      targetElement.setAttribute(
        "draggable",
        `${(options == null ? void 0 : options.draggable) !== void 0 ? options == null ? void 0 : options.draggable : true}`
      );
      targetElement.addEventListener("dragstart", onDragStart);
      targetElement.addEventListener("dragend", onDragEnd);
      return () => {
        targetElement.removeEventListener("dragstart", onDragStart);
        targetElement.removeEventListener("dragend", onDragEnd);
      };
    },
    [],
    target
  );
};
module.exports = useDrag;