angular拖拽元素

由於官網無法登陸所以參考csdn angular拖拽案例

滾動條屬性設定

需求：把ng-zorro**頭部做成可拖拽的形式

思路：拖拽**最簡單的實現就是把**的元素設計成陣列渲染，通過改變陣列元素來渲染表頭，上**

"

listofdata
" [nzpagesize]="
2" [nzpagesizeoptions]="
[1,2,3,4,5]
"[nzshowpagination]="
true
" nzshowsizechanger [nzscroll]="
">
"horizontal
"class="
example-list
" cdkdroplist (cdkdroplistdropped)="
droptest($event)
">
"let i of tharr;
"class="
example-box
" nzalign="
center
" cdkdrag>} 
"let data of basictable.data
">
"let i of tharr let index=index
" [nzalign]="
thfont(index)
">} 

less

.example-list //拖拽目標樣式

.cdk-drag-preview //拖拽時原目標元素樣式
.cdk-drag-placeholder //放入新位置動畫效果
.cdk-drag-animating //拖拽移動效果
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) //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 //偶數行變色
::ng-deep table tbody> tr:nth-child(even)//奇數行變色
::ng-deep table tbody> tr:nth-child(odd)//去頭部空格
::ng-deep.nz-table-hide-scrollbar//去滾動條
::ng-deep::-webkit-scrollbar

ts

import from '@angular/core';

import from '@angular/cdk/drag-drop';
}) thfontstyle:any = ['left', 'center', 'right']
listofdata: any = ;thhear(value:any, attribute: any) thfont(value: any): "left" | "right" | "center" | null droptest(event: cdkdragdrop) ngoninit() `,
age: i,
address: `new york no. $lake park`})}
}}

滑鼠拖拽div元素

上圖中綠色箭頭指向的分別是3個事件，大概的意思是 滑鼠單擊div box元素後，啟用了document.onmousemove滑鼠移動事件，在移動滑鼠時，會改變div box的left top值，從而達到div box元素隨著滑鼠移動。單滑鼠放開時觸發了document.onmouseup滑鼠鬆開事...

實現 元素 可拖拽

css部分 body drag item html部分 drag item div js部分 var dragitem document.getelementsbyclassname drag item 0 var divx,divy,startmou startmousey,endmou endm...

移動端 拖拽元素

1 觸控元素 touchstart 獲取手指初始座標，同時獲得盒子原來的位置 2 移動手指 touchmove 計算手指的滑動距離，並且移動盒子 3 離開手指 touchend e.targettouches 0 pagex e.targettouches 0 pagey 這兩個為手指移動時 在頁面...