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

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

1 个答案: