Draggable table tr 未在 vue.js 中移动

Question

我使用 vue.js 2.0，我使用 Vue.Draggable 制作了可拖动的 table。它没有错误，但是当我尝试拖动 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 设置之后也是如此。

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

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

我不太清楚为什么此模板要求仅适用于 table 情况，而不适用于 div 情况。

在 GitHub 期中，the author refers to this portion of the Vue documentation: DOM Template Parsing Caveats

作者还在JSFiddle上提供了一个table例子。

对于它的价值...我能够使用 vue-sortable without this requirement of using templates. The downside with vue-sortable, is that it hasn't been maintained and updated for Vue2. I found a workaround 拖动到 tables 上工作，以将其与 Vue2 一起安装。安装后，使用起来更简单，但功能较少。

Answer 2

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

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

Answer 3

在简单添加可拖动对象时，我多次遇到这个问题。 github issue 61 and here but they are surely in documentation.

中没有提到我注意到的几件事

当您添加 table 时，您需要使模板保持标准 html，这样您就不能在其中包含可拖动元素和 tr。您应该使用 is="draggable" 作为 tbody 的属性。
tag="tbody" 甚至在 tbody 上使用来呈现 tbody 标签，否则 draggable 仍然有效，但你不会有 tbody 标签。

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

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

Answer 4

对我有用的：

HTML

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Sport</th>
    </tr>
  </thead>
  <tbody is="draggable" :list="list" tag="tbody">
    <tr
      v-for="item in list"
      :key="item.id"
    >
      <td>[[ item.id ]]</td>
      <td>[[ item.name ]]</td>
      <td>[[ item.sport ]]</td>
    </tr>
  </tbody>
</table>

JS

<script>
  var app = new Vue({
    ...,
    data: {
      list: [
        { id: 1, name: "Abby", sport: "basket" },
        { id: 2, name: "Brooke", sport: "foot" },
        { id: 3, name: "Courtenay", sport: "volley" },
        { id: 4, name: "David", sport: "rugby" },
      ],
    },
  });
</script>

Draggable table tr 未在 vue.js 中移动

Draggable table tr is not moved in vue.js

html-table

draggable

vue.js

vuejs2

对我有用的：

HTML

JS