/**
 * 拖拽
 * @param selector 要被拖拽的元素 仅支持css选择器
 * @param moveSelector 被移动的元素 仅支持css选择器
 * @returns 
 */
export function drag(selector, moveSelector = null) {
  const target = document.querySelector(selector);
  let moveTarget;
  if (moveSelector) moveTarget = document.querySelector(moveSelector);
  if (!target) return console.error('拖拽库调用失败:找不到该选择器');
  target.style.cursor = 'move';
  let listenData = {
    state: 'static',
    offsetX: 0,
    offsetY: 0,
    selectedNode: moveTarget || target,
    parentNode: null
  };
  target.addEventListener('mousedown', (e) => {
    listenData.state = 'moving';
    listenData.offsetX = e['clientX'] - listenData.selectedNode.offsetLeft;
    listenData.offsetY = e['clientY'] - listenData.selectedNode.offsetTop;
  });
  document.addEventListener('mousemove', (e) => {
    e.preventDefault();
    if (listenData.state === 'moving') {
      let moveX = e['clientX'] - listenData.offsetX;
      let moveY = e['clientY'] - listenData.offsetY;
      moveX = moveX < 0 ? 0 : moveX > innerWidth - listenData.selectedNode['clientWidth'] ? innerWidth - listenData.selectedNode['clientWidth'] : moveX;
      moveY = moveY < 0 ? 0 : moveY > innerHeight - listenData.selectedNode['clientHeight'] ? innerHeight - listenData.selectedNode['clientHeight'] : moveY;
      listenData.selectedNode['style'].left = moveX + 'px';
      listenData.selectedNode['style'].top = moveY + 'px';
    }
  });
  document.addEventListener('mouseup', (e) => {
    listenData.state = 'static';

  });
  document.addEventListener('mouseleave', (e) => {
    listenData.state = 'static';
  });
}