ivue-material-plus/dist/unplugin-vue-components/es/hooks/use-draggable/index.mjs

A high quality UI components Library with Vue.js

import { watchEffect, onBeforeUnmount } from 'vue';
import { on, off } from '../../utils/dom.mjs';

const useDraggable = (targetRef, dragRef, dragData, draggable, options) => {
  const handleMoveStart = (event) => {
    if (!draggable.value) {
      return false;
    }
    const rect = targetRef.value.getBoundingClientRect();
    dragData.rect = rect;
    dragData.x = rect.x || rect.left;
    dragData.y = rect.y || rect.top;
    const distance = {
      x: event.clientX,
      y: event.clientY
    };
    dragData.dragX = distance.x;
    dragData.dragY = distance.y;
    dragData.dragging = true;
    on(window, "mousemove", handleMoveMove);
    on(window, "mouseup", handleMoveEnd);
  };
  const handleMoveMove = (event) => {
    if (!draggable.value) {
      return false;
    }
    const distance = {
      x: event.clientX,
      y: event.clientY
    };
    const diffDistance = {
      x: distance.x - dragData.dragX,
      y: distance.y - dragData.dragY
    };
    if (options.sticky) {
      const clientWidth = document.documentElement.clientWidth;
      const clientHeight = document.documentElement.clientHeight;
      if (dragData.x + diffDistance.x <= options.stickyDistance && diffDistance.x < 0) {
        dragData.x = 0;
      } else if (dragData.x + dragData.rect.width - clientWidth > -options.stickyDistance && diffDistance.x > 0) {
        dragData.x = clientWidth - dragData.rect.width;
      } else {
        dragData.x += diffDistance.x;
      }
      if (dragData.y + diffDistance.y <= options.stickyDistance && diffDistance.y < 0) {
        dragData.y = 0;
      } else if (dragData.y + dragData.rect.height - clientHeight > -options.stickyDistance && diffDistance.y > 0) {
        dragData.y = clientHeight - dragData.rect.height;
      } else {
        dragData.y += diffDistance.y;
      }
    } else {
      dragData.x += diffDistance.x;
      dragData.y += diffDistance.y;
    }
    dragData.dragX = distance.x;
    dragData.dragY = distance.y;
  };
  const handleMoveEnd = () => {
    dragData.dragging = false;
    off(window, "mousemove", handleMoveMove);
    off(window, "mouseup", handleMoveEnd);
  };
  const onDraggable = () => {
    if (dragRef.value) {
      dragRef.value.addEventListener("mousedown", handleMoveStart);
    }
  };
  const offDraggable = () => {
    if (dragRef.value) {
      dragRef.value.removeEventListener("mousedown", handleMoveStart);
    }
  };
  watchEffect(() => {
    onDraggable();
  });
  onBeforeUnmount(() => {
    offDraggable();
  });
};

export { useDraggable };
//# sourceMappingURL=index.mjs.map