我对这个库有疑问。首先,为了测试该库,我使用 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>
js
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/
提前致谢
最佳答案
我刚刚遇到了同样的问题。我认为这与最近的版本有关。将可拖动元素替换为 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>
关于javascript - 如何让 Vue Sortable 在桌面上工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61805391/