如何使 Vue Sortable 在桌面上工作？答案

【问题标题】：How can I make Vue Sortable work on table?如何使 Vue Sortable 在桌面上工作？
【发布时间】：2020-05-14 19:01:30
【问题描述】：

我对这个库有疑问。首先，为了测试这个库，我用 ul 和 li 标签做了一个简单的例子。这很简单。然后，我需要做一个表格，当将我的示例转换为表格时，它不起作用。

表格已显示，但我无法移动任何行。

我使用的是cdn方式。

我认为这是我缺少的东西。

html

<div id='app-example-drag' >
      <table class="table table-striped">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Sport</th>
          </tr>
        </thead>
        <draggable v-model="list" tag="tbody">
          <tr v-for="item in list" :key="item.name">
            <td scope="row">{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sport }}</td>
          </tr>
        </draggable>
      </table>
</div>

                    Vue.component('draggable',vuedraggable);

applicationExample = new Vue({
  el: '#app-example-drag',
  display: "Table",
  order: 8,
  data() {
    return {
      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" }
      ]
    };
  }
});

https://jsfiddle.net/0Luhd694/3/

提前致谢

【问题讨论】：

标签： javascript vue.js sortablejs

【解决方案1】：

我刚刚遇到了同样的问题。我认为它与最近的版本有关。将可拖动元素替换为 tbody 并使 is='draggable'。

<div id='app-example-drag' >
  <table class='table'>
      <thead>
          <tr><th scope='col'>description</th></tr>
        </thead>
        <tbody tag='tbody' v-model='lista1' is='draggable' group='items'>
          <tr v-for='item in lista1' :key='item.id'>
           <td scope='row'>{{item.description}}</td>
          </tr>
        </tbody>
    </table>
</div>

https://jsfiddle.net/oqf64kdx/

【讨论】：