如何在保留拖拽功能的同时禁止文本选中

碰到这种情况太常见啦，我来给你捋捋怎么解决～

问题的核心在于你之前的拖拽逻辑可能是依赖文本选中来触发的，直接加user-select: none会打断这个触发链。其实我们只需要把拖拽的触发权从文本转移到元素本身，就能两全其美了。

下面是具体的解决步骤：

1. 明确可拖拽元素的身份
   给每个需要拖拽的容器元素加上draggable="true"属性，直接告诉浏览器这个元素本身就是可拖拽目标，不需要依赖文本选中的触发。

2. 添加禁止文本选中的CSS
   给这些可拖拽元素加上user-select: none样式，还可以配合鼠标指针样式优化交互体验：

   .draggable-item {
     user-select: none;
     cursor: grab;
     /* 保留你原本的其他样式，比如内边距、边框等 */
   }
   .draggable-item:active {
     cursor: grabbing;
   }
   

3. 把拖拽事件绑定到容器上
   将dragstart、dragend这类拖拽相关事件，直接绑定到可拖拽容器元素上，而不是内部的文本节点。举个Vue组件的示例：

   <template>
     <div 
       class="draggable-item" 
       draggable="true"
       @dragstart="handleDragStart"
       @dragend="handleDragEnd"
     >
       {{ item.content }}
     </div>
   </template>
   
   <script setup>
   const item = { content: 'Item A' };
   
   const handleDragStart = (e) => {
     // 设置拖拽数据，比如传递元素ID
     e.dataTransfer.setData('text/plain', item.id);
     e.target.style.opacity = '0.5';
   };
   
   const handleDragEnd = (e) => {
     e.target.style.opacity = '1';
   };
   </script>
   
   <style scoped>
   .draggable-item {
     user-select: none;
     cursor: grab;
     padding: 8px 12px;
     border: 1px solid #eee;
     margin: 4px 0;
     background: white;
   }
   .draggable-item:active {
     cursor: grabbing;
   }
   </style>
   

4. 第三方拖拽库的适配
   如果你用的是Vue.Draggable这类第三方库，只需要确保库的拖拽触发目标是元素容器，同时给元素加上user-select: none即可。库本身会处理拖拽事件的绑定，完全不需要依赖文本选中。

这样调整之后，用户不需要选中文本，直接点击拖拽元素就能触发拖拽操作，同时文本也不会被意外选中啦～

内容来源于stack exchange