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

Vue hooks library

import { getTargetElement } from "../utils/domTarget";
import useEffectWithTarget from "../utils/useEffectWithTarget";
import { ref } from "vue";
const useDrop = (target, options = {}) => {
  const optionsRef = ref(options);
  const dragEnterTarget = ref();
  useEffectWithTarget(
    () => {
      const targetElement = getTargetElement(target);
      if (!(targetElement == null ? void 0 : targetElement.addEventListener)) {
        return;
      }
      const onData = (dataTransfer, event) => {
        const uri = dataTransfer.getData("text/uri-list");
        const dom = dataTransfer.getData("custom");
        if (dom && optionsRef.value.onDom) {
          let data = dom;
          try {
            data = JSON.parse(dom);
          } catch (e) {
            data = dom;
          }
          optionsRef.value.onDom(data, event);
          return;
        }
        if (uri && optionsRef.value.onUri) {
          optionsRef.value.onUri(uri, event);
          return;
        }
        if (dataTransfer.files && dataTransfer.files.length && optionsRef.value.onFiles) {
          optionsRef.value.onFiles(Array.from(dataTransfer.files), event);
          return;
        }
        if (dataTransfer.items && dataTransfer.items.length && optionsRef.value.onText) {
          dataTransfer.items[0].getAsString((text) => {
            optionsRef.value.onText(text, event);
          });
        }
      };
      const onDragEnter = (event) => {
        var _a, _b;
        event.preventDefault();
        event.stopPropagation();
        dragEnterTarget.value = event.target;
        (_b = (_a = optionsRef.value).onDragEnter) == null ? void 0 : _b.call(_a, event);
      };
      const onDragOver = (event) => {
        var _a, _b;
        event.preventDefault();
        (_b = (_a = optionsRef.value).onDragOver) == null ? void 0 : _b.call(_a, event);
      };
      const onDragLeave = (event) => {
        var _a, _b;
        if (event.target === dragEnterTarget.value) {
          (_b = (_a = optionsRef.value).onDragLeave) == null ? void 0 : _b.call(_a, event);
        }
      };
      const onDrop = (event) => {
        var _a, _b;
        event.preventDefault();
        onData(event.dataTransfer, event);
        (_b = (_a = optionsRef.value).onDrop) == null ? void 0 : _b.call(_a, event);
      };
      const onPaste = (event) => {
        var _a, _b;
        onData(event.clipboardData, event);
        (_b = (_a = optionsRef.value).onPaste) == null ? void 0 : _b.call(_a, event);
      };
      targetElement.addEventListener("dragenter", onDragEnter);
      targetElement.addEventListener("dragover", onDragOver);
      targetElement.addEventListener("dragleave", onDragLeave);
      targetElement.addEventListener("drop", onDrop);
      targetElement.addEventListener("paste", onPaste);
      return () => {
        targetElement.removeEventListener("dragenter", onDragEnter);
        targetElement.removeEventListener("dragover", onDragOver);
        targetElement.removeEventListener("dragleave", onDragLeave);
        targetElement.removeEventListener("drop", onDrop);
        targetElement.removeEventListener("paste", onPaste);
      };
    },
    [],
    target
  );
};
export {
  useDrop as default
};