当前位置：首页 > news >正文

Sortablejs动态同类型穿插

news 来源：原创 2025/6/26 9:11:15

Sortablejs动态同类型穿插，非同类型禁止插入

文档：https://sortablejs.com/options
对应版本：

"sortablejs": "^1.15.0"
"vue": "2.6.10"
"element-ui": "2.13.2"

代码如下：

<template><div><el-tableref="dragTable":data="tableData"row-key="id"border:row-class-name="tableRowClassName"><el-table-column prop="id" label="ID" width="80" /><el-table-column prop="name" label="姓名" /><el-table-column prop="type" label="类型" /><el-table-column label="操作"><template #default="{ row }"><el-button class="drag-handle" type="text">拖拽按钮</el-button></template></el-table-column></el-table></div>
</template><script>
import Sortable from 'sortablejs'export default {data() {return {tableData: [{ id: 1, name: '行1', type: '取消推荐' },{ id: 3, name: '行2', type: '取消推荐' },{ id: 2, name: '行3（类型B）', type: '推荐' },{ id: 4, name: '行4（类型B）', type: '推荐' }],draggingType: null // 记录当前拖拽元素的类型}},mounted() {this.initSortable()},methods: {// 标记禁止拖入的行（可选）tableRowClassName({ row }) {return row.type === '取消推荐' ? 'recommend-drop-row' : ''},// 初始化拖拽initSortable() {const tbody = this.$refs.dragTable.$el.querySelector('.el-table__body-wrapper tbody')const self = thisSortable.create(tbody, {animation: 150,handle: '.drag-handle',ghostClass: 'ghost-row',group: {name: 'table-group',put: (evt) => {// 动态判断是否允许放入目标行const targetRow = evt.to.closest('tr')const targetType = targetRow.querySelector('td:nth-child(3)').textContent // 这里根据自己实际情况来调整return targetType === self.draggingType // 仅允许同类型放入}},onStart: (evt) => {// 拖拽开始时记录当前元素的类型const draggedRow = evt.itemself.draggingType = draggedRow.querySelector('td:nth-child(3)').textContent},onMove: (evt) => {// 实时反馈是否允许插入（可选）const relatedRow = evt.related.closest('tr')if (relatedRow) {const relatedType = relatedRow.querySelector('td:nth-child(3)').textContentif (relatedType !== self.draggingType) {evt.dragged.style.opacity = '0.3' // 视觉提示return false // 禁止穿插}}return true},onEnd: (evt) => {// 重置状态self.draggingType = nullevt.item.style.opacity = '1'// 数据顺序更新const { oldIndex, newIndex } = evtconst movedRow = self.tableData.splice(oldIndex, 1)[0]self.tableData.splice(newIndex, 0, movedRow)}})}}
}
</script><style>
.recommend-drop-row {background-color: #d78e8e !important;
}
.ghost-row {opacity: 0.5;background: #c8ebfb !important;
}
.drag-handle {cursor: move;
}
</style>