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

Vue hooks library

import { ref } from "vue";
import { getTargetElement } from "../utils/domTarget";
import useEffectWithTarget from "../utils/useEffectWithTarget";
const useDrag = (data, target, options = {}) => {
  const optionsRef = ref(options);
  useEffectWithTarget(
    () => {
      const targetElement = 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
  );
};
export {
  useDrag as default
};