如何禁止在使用sortable插件拖拽单元格时其他单元格自动上调
时间: 2024-03-16 07:41:02 浏览: 102
网页中 任意控件,模块,禁止拖拽效果
如果你想禁止在使用Sortable插件拖拽单元格时其他单元格自动上调,可以通过设置`onMove`事件的`pullMode`属性来实现。具体步骤如下:
1. 在`new Sortable()`时,设置`onMove`事件,该事件会在拖拽移动时触发。
2. 在事件处理函数中设置`pullMode`属性为`clone`,表示拖拽时只复制被拖拽的单元格,而不是移动整个行。
下面是一个示例代码:
```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'
}
})
}
}
</script>
```
在上面的示例中,我们使用`Sortable`插件来实现拖拽排序,然后在`onMove`事件处理函数中设置`pullMode`属性为`clone`来禁止其他单元格自动上调。这样就可以禁止其他单元格自动上调了。
阅读全文