vueDraggable插件拖拽过程中节点文本不允许选中方案

如上图，在拖拽“睡眠”节点过程中划过了“下载代码”其他节点，发现其他节点的文本被选中变色，会影响拖拽体验，针对这个问题有以下解决方案：

方案一：

通过onStart在拖拽开始时给body添加一个class类，然后通过这个类设置全局的指针事件，并在onEnd拖拽结束时清除这个class类。

<script setup>
// 在拖拽开始/结束时添加 body 样式控制
const onDragStart = () => {
  document.body.classList.add('drag-active');
}

const onDragEnd = () => {
  document.body.classList.remove('drag-active'); 
}
</script>

<style>
// 增强拖拽时的全局控制
body.drag-active {
  cursor: grabbing !important;
  
  * {
    cursor: grabbing !important;
    pointer-events: none;
    
    &.ghost,
    &.drag {
      pointer-events: auto;
    }
  }
}
</style>

但是这个方式可能会影响页面其他容器的效果。

方案二：

通过物理屏蔽+定时清理，确保拖拽过程中无法选中文本，也不影响拖拽元素操作，可以根据实际效果调整清理间隔时间（50ms）。

// 在拖拽开始时添加终极保护
const onDragStart = () => {
  // 添加事件防护
  const cleanSelection = () => {
    window.getSelection().removeAllRanges()
    document.onselectstart = () => false
  }
  
  // 高频清理选区
  const selectionCleaner = setInterval(cleanSelection, 50)
  
  // 拖拽结束时清理
  const onEnd = () => {
    document.onselectstart = null
    clearInterval(selectionCleaner)
    document.removeEventListener('mouseup', onEnd)
  }
  
  document.addEventListener('mouseup', onEnd, { once: true })
}