为什么 vue-draggable 在 Edge + IE11 中选择文本？

Question

我遇到了这样一种情况：vue-draggable 在 Chrome 和 Firefox 中按预期工作，但在 Edge 和 IE 中却没有。在那里，浏览器不会拖动列表项，而是选择文本。

考虑一下fiddle。

HTML：

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

JavaScript + Vue：

var vm = new Vue({
  el: "#main",
  data: {
    list:[{name:"Apple"}, 
          {name:"Banana"}, 
          {name:"Cherry"} ]
  }
});

CSS：

.dragArea{
    min-height: 10px;
    background-color: greenyellow;     
    cursor: pointer;
}
.dragArea a {
    display: block;
}

我在文档中找不到任何相关内容。

Answer 1

我找到了解决方案。使用<div> 而不是<a>。不过，我无法解释原因。

HTML：

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

JavaScript + Vue：

var vm = new Vue({
  el: "#main",
  data: {
    list:[{name:"Apple"}, 
          {name:"Banana"}, 
          {name:"Cherry"} ]
  }
});

CSS：

.dragArea{
    min-height: 10px;
    background-color: greenyellow;     
    cursor: pointer;
}
.dragArea a {
    display: block;
}

Fiddle.