我正在尝试在表格中使用 vuedraggable，但我无法使用所需的句柄重新排列表格行：
代码：https ://codesandbox.io/s/kkpp3xry63
应用程序.vue
<template>
<div id="app">
<RowComponent/>
<Draggable
v-model="data"
v-bind="drag_options"
handle="[name=dragger]"
tag="table"
@start="drag = true"
@end="drag = false"
>
<thead slot="header">
<th>
Placeholder
</th>
<th>
Map Level
</th>
<th>
Revision
</th>
</thead>
<transition-group
type="transition"
:name="!drag ? 'flip-list' : null"
tag="tbody"
>
<row-component
v-for="row in data"
:key="row._id"
/>
</transition-group>
</Draggable>
</div>
</template>
<script>
import Draggable from "vuedraggable"
import RowComponent from "./components/Row.vue";
export default {
name: "App",
components: {
Draggable,
RowComponent
},
data ()
{
return {
data:
[
{
_id:
1,
},
{
_id:
2,
},
{
_id:
3,
},
],
drag:
false,
drag_options:
{
animation:
200,
group:
"description",
disabled:
false,
ghostClass:
"ghost"
},
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<style lang="scss" scoped>
table
{
width: 100%;
}
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
行.vue
<template>
<tr>
<td>
<div name="draggable">Move</div>
</td>
<td style="padding: 10px;">
<input class="form-control" type="text">
</td>
<td>
<div>
<select>
<option></option>
</select>
</div>
<div>
<div>
<button class="btn btn-color-primary btn-size-normal">Rename</button>
<button
class="btn btn-color-primary btn-size-normal"
@click="showing.note = !showing.note"
>Note</button>
<button class="btn btn-color-orange btn-size-normal">Draw</button>
</div>
<div>
<textarea v-if="showing.note"></textarea>
</div>
</div>
</td>
</tr>
</template>
<script>
export default {
data() {
return {
showing: {
note: false
}
};
}
};
</script>
<style lang="scss" scoped>
td {
border: 1px solid black;
border-collapse: collapse;
}
textarea {
font-size: initial;
padding: 10px;
height: 100px;
width: 100%;
}
[name="draggable"] {
cursor: pointer;
}
</style>