可拖动表 tr 在 vue.js 中没有移动

Question

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

index.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>

app.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 时就不行了。即使在我发现element 设置之后也是如此。

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

问题似乎在于您的draggable HTML 代码位于index.html 与模板中。当我将代码移到模板中时，它就开始工作了。

我不太清楚为什么这个模板要求只存在于table 的情况下，而不是div 的情况下。

在 GitHub 问题中，the author refers 到这部分 Vue 文档：DOM Template Parsing Caveats

作者还在JSFiddle上提供了一个表格示例。

对于它的价值...我能够使用vue-sortable 拖动以在表格上工作，而无需使用模板。 vue-sortable 的缺点是它没有为 Vue2 维护和更新。我找到了workaround 来安装 Vue2。安装后，使用起来更简单，但功能更少。

Answer 2

在简单添加可拖动对象时，我多次遇到这个问题。 github issue 61 和这里没有提到我注意到的几件事，但它们肯定在 documentation 中。

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

鉴于上述情况，我设置了一个example fiddle of 3 tables。我已经用表/列表和 div 对其进行了测试，因此在这里链接到 3 个表示例。前两个表与group="people" 链接，因此您可以在它们之间拖放，最后一个是独立的。只是为了展示分组的作用。

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

Answer 3

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

改用这个。我希望这可以帮助你。