angular拖拽元素

2022-09-20 08:27:09 字數 1733 閱讀 6799

由於官網無法登陸所以參考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 這兩個為手指移動時 在頁面...