首页 >> js开发 >> js通过angular CDK实现页面元素拖放的步骤详解js大全
js通过angular CDK实现页面元素拖放的步骤详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动、在特定区域内拖动亦或对列表进行拖放排序等等。
通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能,如元素在页面中随意拖动、在特定区域内拖动亦或对列表进行拖放排序等等。
CDK. The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design.WEB项目中有些场景会使用元素拖动效果,那么对于angular项目我们可以通过导入“@angular/cdk/drag-drop”模块轻松实现元素自由拖动效果。首先我们会创建拖放对象,如同:
拖动元素
拖动元素
.drag{
position:absolute;
left:0;
bottom:0;
border:1px grey solid;
width:60px;
height:60px;
cursor: move;
z-index:1;
}
.drag{
position:absolute;
left:0;
bottom:0;
border:1px grey solid;
width:60px;
height:60px;
cursor: move;
z-index:1;
}然后我们在相应模块中导入拖动模块即可。
import { DragDropModule } from '@angular/cdk/drag-drop'
import { DragDropModule } from '@angular/cdk/drag-drop'在页面中,我们就可以直接使用其指令实现(cdDrag)。
即可实现自由拖动效果。angular cdk drag-drop我们可以实现自由拖放、列表重新排序、列表间数据传输、特指拖放控制、及其拖放临界点控制等等。拖动元素内指定拖动控制,如: