禁止上调的同时需要与对应的单元格完成位置的互换
时间: 2024-03-16 12:41:08 浏览: 23
如果你想在禁止其他单元格自动上调的同时,让被拖拽的单元格与目标单元格完成位置互换,可以使用`onEnd`事件来实现。具体步骤如下:
1. 在`new Sortable()`时,设置`onEnd`事件,该事件会在拖拽结束时触发。
2. 在事件处理函数中获取被拖拽的单元格和目标单元格的索引,并通过交换这两个单元格的数据来完成位置的互换。
下面是一个示例代码:
```html
<template>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Jack', age: 30 },
{ id: 4, name: 'Lisa', age: 35 }
]
}
},
mounted() {
let tableBody = this.$el.querySelector('tbody')
new Sortable(tableBody, {
onMove: (evt, dragEl, targetEl) => {
evt.preventDefault()
evt.stopPropagation()
evt.data.pullMode = 'clone'
},
onEnd: (evt) => {
let tableRows = Array.from(evt.to.children)
let dragIndex = tableRows.findIndex(row => row.contains(evt.item))
let targetIndex = tableRows.findIndex(row => row.contains(evt.target))
if (dragIndex >= 0 && targetIndex >= 0 && dragIndex !== targetIndex) {
let temp = this.tableData[dragIndex]
this.tableData.splice(dragIndex, 1, this.tableData[targetIndex])
this.tableData.splice(targetIndex, 1, temp)
}
}
})
}
}
</script>
```
在上面的示例中,我们使用`Sortable`插件来实现拖拽排序,然后在`onMove`事件处理函数中设置`pullMode`属性为`clone`来禁止其他单元格自动上调。在`onEnd`事件处理函数中获取被拖拽的单元格和目标单元格的索引,并通过交换这两个单元格的数据来完成位置的互换。这样就可以禁止其他单元格自动上调,并完成位置的互换了。