| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 | 
							- import { onMounted, watchEffect, onBeforeUnmount } from 'vue';
 
- import '../../utils/index.mjs';
 
- import { addUnit } from '../../utils/dom/style.mjs';
 
- const useDraggable = (targetRef, dragRef, draggable) => {
 
-   let transform = {
 
-     offsetX: 0,
 
-     offsetY: 0
 
-   };
 
-   const onMousedown = (e) => {
 
-     const downX = e.clientX;
 
-     const downY = e.clientY;
 
-     const { offsetX, offsetY } = transform;
 
-     const targetRect = targetRef.value.getBoundingClientRect();
 
-     const targetLeft = targetRect.left;
 
-     const targetTop = targetRect.top;
 
-     const targetWidth = targetRect.width;
 
-     const targetHeight = targetRect.height;
 
-     const clientWidth = document.documentElement.clientWidth;
 
-     const clientHeight = document.documentElement.clientHeight;
 
-     const minLeft = -targetLeft + offsetX;
 
-     const minTop = -targetTop + offsetY;
 
-     const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
 
-     const maxTop = clientHeight - targetTop - targetHeight + offsetY;
 
-     const onMousemove = (e2) => {
 
-       const moveX = Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft);
 
-       const moveY = Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop);
 
-       transform = {
 
-         offsetX: moveX,
 
-         offsetY: moveY
 
-       };
 
-       targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
 
-     };
 
-     const onMouseup = () => {
 
-       document.removeEventListener("mousemove", onMousemove);
 
-       document.removeEventListener("mouseup", onMouseup);
 
-     };
 
-     document.addEventListener("mousemove", onMousemove);
 
-     document.addEventListener("mouseup", onMouseup);
 
-   };
 
-   const onDraggable = () => {
 
-     if (dragRef.value && targetRef.value) {
 
-       dragRef.value.addEventListener("mousedown", onMousedown);
 
-     }
 
-   };
 
-   const offDraggable = () => {
 
-     if (dragRef.value && targetRef.value) {
 
-       dragRef.value.removeEventListener("mousedown", onMousedown);
 
-     }
 
-   };
 
-   onMounted(() => {
 
-     watchEffect(() => {
 
-       if (draggable.value) {
 
-         onDraggable();
 
-       } else {
 
-         offDraggable();
 
-       }
 
-     });
 
-   });
 
-   onBeforeUnmount(() => {
 
-     offDraggable();
 
-   });
 
- };
 
- export { useDraggable };
 
- //# sourceMappingURL=index.mjs.map
 
 
  |