vue自定义拖拽指令

Vue.directive('draggable', { 
  bind(el) { 
      el.style.position = 'absolute'; 
      el.style.cursor = 'move'; 
      let offsetX = 0; 
      let offsetY = 0; 
      let isDragging = false; 
      el.addEventListener('mousedown', startDrag); 
      el.addEventListener('touchstart', startDrag);
      function startDrag(e) { 
          e.preventDefault(); 
          if (e.type === 'touchstart') { 
              offsetX = e.touches[0].clientX - el.getBoundingClientRect().left; 
              offsetY = e.touches[0].clientY - el.getBoundingClientRect().top; 
          } else { 
              offsetX = e.clientX - el.getBoundingClientRect().left; 
              offsetY = e.clientY - el.getBoundingClientRect().top; 
          }
              isDragging = true; 
              document.addEventListener('mousemove', handleDrag); 
              document.addEventListener('touchmove', handleDrag); 
              document.addEventListener('mouseup', stopDrag); 
              document.addEventListener('touchend', stopDrag); 
          }
          function handleDrag(e) { 
              e.preventDefault(); 
              let x = 0; 
              let y = 0; 
              if (e.type === 'touchmove') { 
                  x = e.touches[0].clientX - offsetX; y = e.touches[0].clientY - offsetY; 
              } else { 
                  x = e.clientX - offsetX; 
                  y = e.clientY - offsetY; 
              } 
                  el.style.left = x + 'px'; 
                  el.style.top = y + 'px'; 
          }
        function stopDrag() { 
            isDragging = false;
            document.removeEventListener('mousemove', handleDrag); 
            document.removeEventListener('touchmove', handleDrag);
            document.removeEventListener('mouseup', stopDrag); 
            document.removeEventListener('touchend', stopDrag); 
      } 
  } 
});