vue-draggable在Edge及IE11中触发文本选中的原因是什么？

我之前也碰到过这个糟心的问题，Edge和IE的拖拽事件处理逻辑确实和Chrome/Firefox不太一样，尤其是当拖拽项是<a>标签的时候，浏览器的默认行为很容易干扰vue-draggable的正常工作。下面是几个亲测有效的解决方案：

1. 禁用文本选中行为 #

给拖拽区域和列表项添加CSS，强制禁止浏览器的文本选中功能，这能直接解决拖拽时选中文本的问题：

.dragArea, .dragArea a {
  user-select: none;
  -ms-user-select: none; /* 针对IE和旧版Edge的前缀 */
  -webkit-user-select: none; /* 兼容webkit内核浏览器 */
}

2. 阻止<a>标签的默认行为 #

<a>标签的默认点击/拖拽行为会和vue-draggable的事件冲突，你可以在<a>标签上添加@mousedown.prevent来阻止默认的鼠标按下行为，这样拖拽事件就能正常触发了：

<div id="main">
  <draggable :list="list" class="dragArea">
    <a v-for="element in list" :key="element.name" @mousedown.prevent>{{element.name}}</a>
  </draggable>
</div>

注意：如果你的<a>标签需要正常跳转功能，不要用@mousedown.prevent，可以换成@dragstart.prevent，只阻止拖拽时的默认行为，不影响点击跳转。

3. 替换<a>标签为非链接元素 #

如果你的列表项不需要跳转功能，直接把<a>换成<div>或者<span>这类普通元素，能彻底避免链接默认行为的干扰：

<div id="main">
  <draggable :list="list" class="dragArea">
    <div v-for="element in list" :key="element.name">{{element.name}}</div>
  </draggable>
</div>

4. 检查vue-draggable版本 #

确保你使用的是支持IE/Edge的vue-draggable版本，旧版本可能存在兼容性问题。如果是用npm安装的，可以尝试更新到最新稳定版：

npm update vuedraggable

把这些方案组合起来，基本就能解决Edge和IE里的拖拽问题了。

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