Vue中Draggable组件内嵌Textarea的文本选中冲突问题

针对Draggable组件内嵌Textarea时，选中文本触发拖拽的问题，提供以下几种实用解决方案：

方法1：阻止Textarea的事件冒泡 #

通过阻止Textarea上的鼠标按下和选中文本事件冒泡，避免Draggable触发拖拽逻辑：

<draggable v-model="yourList">
  <div v-for="item in yourList" :key="item.id" class="draggable-item">
    <textarea
      v-model="item.text"
      @mousedown.stop
      @selectstart.stop
    ></textarea>
  </div>
</draggable>

• @mousedown.stop：阻止鼠标按下事件向上冒泡到Draggable组件，避免触发拖拽启动逻辑
• @selectstart.stop：确保选中文本的原生行为不受拖拽事件干扰

方法2：指定拖拽触发的专属区域 #

利用Draggable的handle属性，仅允许点击特定元素时触发拖拽，Textarea区域不响应拖拽：

<draggable v-model="yourList" handle=".drag-handle">
  <div v-for="item in yourList" :key="item.id" class="draggable-item">
    <!-- 拖拽手柄 -->
    <span class="drag-handle">⋮⋮</span>
    <textarea v-model="item.text"></textarea>
  </div>
</draggable>

<style scoped>
.drag-handle {
  cursor: grab;
  margin-right: 8px;
}
</style>

这种方式更符合用户交互习惯——只有点击明确的拖拽手柄时才会触发拖拽，Textarea区域专注于文本编辑。

方法3：根据Textarea焦点状态动态禁用拖拽 #

当Textarea获得焦点时，临时禁用Draggable的拖拽功能，失去焦点后恢复：

<draggable v-model="yourList" :disabled="textareaFocused">
  <div v-for="item in yourList" :key="item.id" class="draggable-item">
    <textarea
      v-model="item.text"
      @focus="textareaFocused = true"
      @blur="textareaFocused = false"
    ></textarea>
  </div>
</draggable>

<script>
export default {
  data() {
    return {
      yourList: [],
      textareaFocused: false
    }
  }
}
</script>

这种方案可以在文本编辑期间完全禁用拖拽，避免误触，适合对交互精度要求较高的场景。

内容的提问来源于stack exchange，提问作者Turgunov Sardor