JS拖拽常见失效问题

一、拖拽过快导致拖拽失效

        问题原因

        鼠标移动过快，由于元素的移动速度不及鼠标的移动速度，造成鼠标移动到元素外，从而触发mouseout事件，提前结束拖拽。

        解决方案

       将事件处理函数添加到 document 上，而非目标元素上

const draggable = document.getElementById('draggable');
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
  e.preventDefault();
  const rect = draggable.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  
  const moveHandler = (e) => {
    draggable.style.left = `${e.clientX - offsetX}px`;
    draggable.style.top = `${e.clientY - offsetY}px`;
  };
  
  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveHandler);
  }, { once: true });
});

 

二、拖拽容器中存在iframe导致失效

        问题原因

   鼠标移动到iframe容器内部时，哪怕监听器是添加在document上，这时候也是无法监听到

        解决方案

         当鼠标按下mousedown时动态给iframe 添加样式pointer-events："none",使其事件能穿透到doncument上面。在鼠标松开mouseup时，记得去掉该样式或者添加pointer-events："auto"