可拖动表 tr 在 vue.js 中未移动

Question

我用vue.js 2.0和我使用可拖动表格Vue.Draggable。它没有错误，但是当我尝试拖动时tr，它没有移动。但是使用div然后它移动了。我错过了什么吗？

索引.html

<div id="service-list">
<table>
    <draggable :list="services" :element="'tbody'"> 
       <tr v-for="service in services">
          <td>{{ service.name }}</td>
          <td>{{ service.price }}</td>
       </tr>
    </draggable>
</table>
</div>

应用程序.js

var service_list = new Vue({
    el: '#service-list',
    data: {
    services: []
},
mounted: function() {
    var that = this;
    $.get({
        url: 'use my url',
        success: function(res) {
            that.services = res;
        }
    })
}

Answer 1

我遇到了同样的问题。如果我使用，一切正常，div但当我尝试使用tr's时则不然。即使在我发现element设置之后也是如此。

正如 Marius 在评论中指出的那样，GitHub Issue #61为我解决了这个问题。

问题似乎是您的draggableHTML 代码在index.htmlvs 模板中。当我将代码移到模板中时，它开始工作。

我不太清楚为什么这个模板要求只存在于table案例中，而不是div案例中。

在GitHub issue中，作者参考了Vue文档的这部分：DOM Template Parsing Caveats

作者还提供了一个关于JSFiddle的表格示例。

对于它的价值......我能够使用vue-sortable拖动以处理表格，而无需使用模板。vue-sortable 的缺点是它没有为 Vue2 维护和更新。我找到了一个解决方法来让它与 Vue2 一起安装。安装后，使用起来更简单，但功能较少。

Answer 2

在简单添加可拖动时，我多次遇到这个问题。我注意到的一些事情在github 第 61 期和此处没有提及，但它们肯定在文档中提到。

1. 添加表格时，您需要将模板保留为标准 html，这样您就不能在其中包含可拖动元素和 tr。您应该将is="draggable"其用作 tbody 的属性。
2. tag="tbody"甚至在 tbody 上使用来渲染 tbody 标签，否则draggable 仍然可以工作，但你不会有 tbody 标签。

上面给出了我设置了一个由 3 个表组成的示例小提琴。我已经使用表/列表和 div 对其进行了测试，因此链接到此处的 3 个表示例。前两个表相互链接group="people"，因此您可以在它们之间拖放，最后一个表是独立的。只是为了展示分组的作用。

感谢以上答案，他们确实帮助我做到了这一点。