angular拖拽元素

由于官网无法登陆所以参考csdn angular拖拽案例  滚动条属性设置

需求：把ng-zorro表格头部做成可拖拽的形式

思路：拖拽表格最简单的实现就是把表格的元素设计成数组渲染，通过改变数组元素来渲染表头，上代码

APP.component.html

  <nz-table #basicTable [nzData]="listOfData" [nzPageSize]="2" [nzPageSizeOptions]="[1,2,3,4,5]"
    [nzShowPagination]="true" nzShowSizeChanger [nzScroll]="{y:'100px'}">
    <thead>
      <tr cdkDropListOrientation="horizontal"  class="example-list"  cdkDropList (cdkDropListDropped)="droptest($event)">
        <th *ngFor="let i of tharr;" class="example-box"  nzAlign="center" cdkDrag>{{i}} 
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td *ngFor="let i of tharr let index=index" [nzAlign]="thFont(index)">{{ thHear(data,i) }} </td>
      </tr>
    </tbody>
  </nz-table>

less

.example-list {
    width: 100%;
    min-height: 60px;
    flex-direction: row;
    background: white;
    border-radius: 4px;
    overflow: hidden;
  }
//拖拽目标样式
.cdk-drag-preview {
  position: relative;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.3s ease;
  padding: 16px 16px;
}
//拖拽时原目标元素样式
.cdk-drag-placeholder {
  opacity: 0;
}
//放入新位置动画效果
.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
//拖拽移动效果
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
//table
//悬浮样式修改
::ng-deep .ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover.ant-table-tbody>tr:hover {
  background:slategrey;
}
 //偶数行变色
::ng-deep table tbody> tr:nth-child(even){    
  background:greenyellow;
}
//奇数行变色
::ng-deep table tbody> tr:nth-child(odd){     
  background:bisque;
}
//去头部空格
::ng-deep.nz-table-hide-scrollbar{
  overflow: visible !important;
}

//去滚动条
::ng-deep::-webkit-scrollbar{
  display: none;
 }

ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  tharr = ['name', 'age', 'address']
  thFontStyle: any[] = ['left', 'center', 'right']
  listOfData: any = [];
  thHear(value: any, attribute: any) {
    return value[attribute]
  }
  thFont(value: any): "left" | "right" | "center" | null {
    return this.thFontStyle[value]
  }
  droptest(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.tharr, event.previousIndex, event.currentIndex);
  }
  ngOnInit() {
    for (let i = 0; i < 20; i++) {
      this.listOfData.push({
        key: i,
        name: `John Brown${i}`,
        age: i,
        address: `New York No. ${i} Lake Park`
      })
    }
  }
}

 

标签：拖拽,元素,tr,cdk,background,table,ng,angular
来源： https://www.cnblogs.com/lslhhh/p/15865243.html