2021-10-17 JS使模板元素进行移动（拖拽模板元素）

import { ref } from 'vue';
import useMobile from '@/hooks/useMobile';
export interface WindowMoveParams {
  stopInMobile: boolean;
  stopInOverWindow: boolean;
  onMove: (top: number, left: number) => void;
}
const useWindowMove = (aim: HTMLElement, container: HTMLElement, params?: Partial<WindowMoveParams>) => {
  if (!aim || !container) {
    console.warn(`aim or container element is null`);
    return;
  }
  params = {
    stopInMobile: params?.stopInMobile || true,
    stopInOverWindow: params?.stopInOverWindow || false,
    ...params,
  };
  const { isMobile } = useMobile();
  const mobile = isMobile();
  if (params.stopInMobile && mobile.value) {
    console.warn(`stop window move when in mobile device`);
    return;
  }

  //offset is mouse click offset aim el
  // 通过计算而来：首次点击的clientX - container元素默认的left = OffsetX
  const offsetX = ref(0);
  const offsetY = ref(0);
  const containerCpt = getComputedStyle(container);
  let containerTop = parseFloat(containerCpt.top);
  let containerLeft = parseFloat(containerCpt.left);

  let containerHeight = parseInt(containerCpt.height);
  let containerWidth = parseInt(containerCpt.width);
  const mouseMove = (e: MouseEvent) => {
    let latestTop = e.clientY - offsetY.value;
    let latestLeft = e.clientX - offsetX.value;

    if (params?.stopInOverWindow) {
      if (
        latestTop <= 0 ||
        latestLeft <= 0 ||
        latestTop + containerHeight > window.innerHeight ||
        latestLeft + containerWidth > window.innerWidth
      )
        return;
    }
    params?.onMove && params.onMove(latestTop, latestLeft);
    container.style.top = latestTop + 'px';
    container.style.left = latestLeft + 'px';
  };
  const mouseOut = () => {
    //update left, top
    const containerCpt = getComputedStyle(container);
    containerTop = parseFloat(containerCpt.top);
    containerLeft = parseFloat(containerCpt.left);
    aim.style.cursor = 'default';
    document.removeEventListener('mousemove', mouseMove);
  };
  // aim.addEventListener('click', aimElClick);
  aim.addEventListener('mousedown', (e) => {
    console.log('mousedown');
    // console.log(e.clientY, e.clientX);
    offsetY.value = e.clientY - containerTop;
    offsetX.value = e.clientX - containerLeft;
    aim.style.cursor = 'move';
    document.addEventListener('mousemove', mouseMove);
  });

  // move out event
  // container.addEventListener('mouseout', mouseOut);
  window.addEventListener('mouseup', mouseOut);
  aim.addEventListener('mouseup', mouseOut);
  container.addEventListener('mouseup', mouseOut);
};

export default useWindowMove;