ng-zorro|angular+ng-zorro表格拖拽 ng-zorro|前端

angular集成了cdk drag-drop 来实现拖拽功能
app.modules.ts导入

import { DragDropModule } from '@angular/cdk/drag-drop'; imports: [ DragDropModule ]

一、表格内拖拽排序

工序描述标准工时(分钟) 工序级别 {{ data.desc }} {{ data.sam }} {{ data.grade }}

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop'; sourceData = https://www.it610.com/article/[{'id': 1, 'desc ': 'string', 'sam': 1, 'grade': 1, 'price': 0 }, { 'id': 2, 'desc ': 'string', 'sam': 2, 'grade': 2, 'price': 21 }, { 'id': 3, 'desc ': 'string', 'sam': 3, 'grade': 3, 'price': 3 }]; drop(event: CdkDragDrop[]>) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); }

【ng-zorro|angular+ng-zorro表格拖拽】

文章图片

二、表间拖拽 1、表间相互拖拽无限制

序号工序描述标准工时(分钟) 工序级别标准工价(元) 操作 {{ i+1 }} {{ data.desc }} {{ data.sam }} {{ data.grade }} {{ data.price }} 工序描述标准工时(分钟) 工序级别 {{ data.desc }} {{ data.sam }} {{ data.grade }}

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop'; targetData = https://www.it610.com/article/[{'id': null, 'desc': null, 'sam': null, 'grade': null, 'price': null }]; sourceData = https://www.it610.com/article/[{'id': 1, 'desc ': 'string', 'sam': 1, 'grade': 1, 'price': 0 }, { 'id': 2, 'desc ': 'string', 'sam': 2, 'grade': 2, 'price': 21 }, { 'id': 3, 'desc ': 'string', 'sam': 3, 'grade': 3, 'price': 3 }]; drop(event: CdkDragDrop[]>) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { // 表间数据转换，功能：将源表的数据拖拽到目标表中，并从源表中删除 transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); // 表间数据复制，功能：将源表的数据通过拖拽复制到目标表中，源表中不删除 // copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); /** * 针对目标表必须存在至少一条数据，解决方案一：初始一条空数据，有数据移入时，删除空数据 */ this.targetData.forEach((item) => { if (item.id === null) { this.targetData.splice(this.targetData.indexOf(item), 1); } }); } } // 删除 delete(index) { /** * 针对目标表必须存在至少一条数据，解决方案一：当删除最后一条数据时，增加一条空数据 */ this.targetData.splice(index, 1); if (this.targetData.length === 0) { const data = https://www.it610.com/article/{ id: null, desc: null, sam: null, grade: null, price: null }; this.targetData.splice(0, 0, data); } }

注意点：
目标表必须至少存在一条数据，若为空，则无法进行表间拖拽，其拖拽会被认为为表内拖拽
2、表间拖拽有限制，源表只出不进

序号工序描述标准工时(分钟) 工序级别标准工价(元) 操作 {{ i+1 }} {{ data.desc }} {{ data.sam }} {{ data.grade }} {{ data.price }} 工序描述标准工时(分钟) 工序级别 {{ data.desc }} {{ data.sam }} {{ data.grade }}

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop'; targetData = https://www.it610.com/article/[{'id': null, 'desc': null, 'sam': null, 'grade': null, 'price': null }]; sourceData = https://www.it610.com/article/[{'id': 1, 'desc ': 'string', 'sam': 1, 'grade': 1, 'price': 0 }, { 'id': 2, 'desc ': 'string', 'sam': 2, 'grade': 2, 'price': 21 }, { 'id': 3, 'desc ': 'string', 'sam': 3, 'grade': 3, 'price': 3 }]; drop(event: CdkDragDrop[]>) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { // 表间数据转换，功能：将源表的数据拖拽到目标表中，并从源表中删除 transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); // 表间数据复制，功能：将源表的数据通过拖拽复制到目标表中，源表中不删除 // copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); /** * 针对目标表必须存在至少一条数据，解决方案一：初始一条空数据，有数据移入时，删除空数据 */ this.targetData.forEach((item) => { if (item.id === null) { this.targetData.splice(this.targetData.indexOf(item), 1); } }); } } // 删除 delete(index) { /** * 针对目标表必须存在至少一条数据，解决方案一：当删除最后一条数据时，增加一条空数据 */ this.targetData.splice(index, 1); if (this.targetData.length === 0) { const data = https://www.it610.com/article/{ id: null, desc: null, sam: null, grade: null, price: null }; this.targetData.splice(0, 0, data); } } // 不让其他list里面的数据移入到这个里面来 noReturnPredicate() { return false; }

注：通过cdkDropListEnterPredicate来设置进入限制
详情请见官网：https://material.angular.io/cdk/drag-drop/examples