@arco-design/web-vue/es/tree/hooks/use-draggable.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

import { toRefs, ref } from "vue";
import { throttleByRaf } from "../../_utils/throttle-by-raf.js";
import useTreeContext from "./use-tree-context.js";
function useDraggable(props) {
  const { key, refTitle } = toRefs(props);
  const treeContext = useTreeContext();
  const isDragOver = ref(false);
  const isDragging = ref(false);
  const isAllowDrop = ref(false);
  const dropPosition = ref(0);
  const updateDropPosition = throttleByRaf((e) => {
    if (!refTitle.value)
      return;
    const rect = refTitle.value.getBoundingClientRect();
    const offsetY = window.pageYOffset + rect.top;
    const { pageY } = e;
    const gapHeight = rect.height / 4;
    const diff = pageY - offsetY;
    dropPosition.value = diff < gapHeight ? -1 : diff < rect.height - gapHeight ? 0 : 1;
    isAllowDrop.value = treeContext.allowDrop ? treeContext.allowDrop(key.value, dropPosition.value) : true;
  });
  return {
    isDragOver,
    isDragging,
    isAllowDrop,
    dropPosition,
    setDragStatus(status, e) {
      switch (status) {
        case "dragStart":
          isDragging.value = true;
          dropPosition.value = 0;
          treeContext.onDragStart && treeContext.onDragStart(key.value, e);
          break;
        case "dragEnd":
          isDragging.value = false;
          isDragOver.value = false;
          dropPosition.value = 0;
          updateDropPosition.cancel();
          treeContext.onDragEnd && treeContext.onDragEnd(key.value, e);
          break;
        case "dragOver":
          isDragOver.value = true;
          updateDropPosition(e);
          treeContext.onDragOver && treeContext.onDragOver(key.value, e);
          break;
        case "dragLeave":
          isDragOver.value = false;
          dropPosition.value = 0;
          updateDropPosition.cancel();
          treeContext.onDragLeave && treeContext.onDragLeave(key.value, e);
          break;
        case "drop":
          treeContext.onDrop && treeContext.onDrop(key.value, dropPosition.value, e);
          isDragOver.value = false;
          dropPosition.value = 0;
          updateDropPosition.cancel();
          break;
      }
    }
  };
}
export { useDraggable as default };