index.mjs 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { onMounted, watchEffect, onBeforeUnmount } from 'vue';
  2. import '../../utils/index.mjs';
  3. import { addUnit } from '../../utils/dom/style.mjs';
  4. const useDraggable = (targetRef, dragRef, draggable) => {
  5. let transform = {
  6. offsetX: 0,
  7. offsetY: 0
  8. };
  9. const onMousedown = (e) => {
  10. const downX = e.clientX;
  11. const downY = e.clientY;
  12. const { offsetX, offsetY } = transform;
  13. const targetRect = targetRef.value.getBoundingClientRect();
  14. const targetLeft = targetRect.left;
  15. const targetTop = targetRect.top;
  16. const targetWidth = targetRect.width;
  17. const targetHeight = targetRect.height;
  18. const clientWidth = document.documentElement.clientWidth;
  19. const clientHeight = document.documentElement.clientHeight;
  20. const minLeft = -targetLeft + offsetX;
  21. const minTop = -targetTop + offsetY;
  22. const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
  23. const maxTop = clientHeight - targetTop - targetHeight + offsetY;
  24. const onMousemove = (e2) => {
  25. const moveX = Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft);
  26. const moveY = Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop);
  27. transform = {
  28. offsetX: moveX,
  29. offsetY: moveY
  30. };
  31. targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
  32. };
  33. const onMouseup = () => {
  34. document.removeEventListener("mousemove", onMousemove);
  35. document.removeEventListener("mouseup", onMouseup);
  36. };
  37. document.addEventListener("mousemove", onMousemove);
  38. document.addEventListener("mouseup", onMouseup);
  39. };
  40. const onDraggable = () => {
  41. if (dragRef.value && targetRef.value) {
  42. dragRef.value.addEventListener("mousedown", onMousedown);
  43. }
  44. };
  45. const offDraggable = () => {
  46. if (dragRef.value && targetRef.value) {
  47. dragRef.value.removeEventListener("mousedown", onMousedown);
  48. }
  49. };
  50. onMounted(() => {
  51. watchEffect(() => {
  52. if (draggable.value) {
  53. onDraggable();
  54. } else {
  55. offDraggable();
  56. }
  57. });
  58. });
  59. onBeforeUnmount(() => {
  60. offDraggable();
  61. });
  62. };
  63. export { useDraggable };
  64. //# sourceMappingURL=index.mjs.map