通过angular CDK实现页面元素拖放的步骤详解


Posted in Javascript onJuly 01, 2020

通过导入@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”模块轻松实现元素自由拖动效果。

首先我们会创建拖放对象,如同:

<div class="drag">拖动元素</div>
.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'

在页面中,我们就可以直接使用其指令实现(cdDrag)。

<div class="drag" cdkDrag></div>

即可实现自由拖动效果。

通过angular CDK实现页面元素拖放的步骤详解

angular cdk drag-drop

我们可以实现自由拖放、列表重新排序、列表间数据传输、特指拖放控制、及其拖放临界点控制等等。

拖动元素内指定拖动控制,如:

<div class="drag" cdkDrag>
 <span cdkDragHandle class="dragHandle"></span>
</div>

通过父级 cdkDrag 与 控制子级控制元素 cdkDragHandle 对其作用。

设置拖动临界点,限制在指定区域进行自由拖动。

如果要阻止用户将cdkDrag元素拖动到另一个元素之外,可以将CSS选择器传递给该cdkDragBoundary属性。该属性通过接受选择器并查找DOM直到找到与其匹配的元素为止。如果找到匹配项,则将其用作不能拖动元素的边界。放在里面cdkDragBoundary时也可以使用。

通过angular CDK实现页面元素拖放的步骤详解

Angular cdkDrag Y轴拖动

如在body中拖动,禁止拖放至不可见,或通过css选择器指定临界点

<div class="drag" cdkDrag>
 <span cdkDragHandle cdkDragBoundary="body" class="dragHandle"></span>
</div>

亦或我们可以控制仅在X轴方向或Y轴方向拖动

<div class="drag" cdkDragLockAxis = "x" cdkDrag>
 <span cdkDragHandle cdkDragBoundary="body" class="dragHandle"></span>
</div>

通过cdkDragLockAxis = "x" 或 cdkDragLockAxis = "y"控制。

更多大家可以参考官方介绍,临时使用予以笔记,仅供参考!

总结

到此这篇关于通过angular CDK实现页面元素拖放的文章就介绍到这了,更多相关angular CDK页面元素拖放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 #Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 #Javascript
vue实现购物车列表
Jun 30 #Javascript
vue实现简单图片上传
Jun 30 #Javascript
vue基于better-scroll仿京东分类列表
Jun 30 #Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
You might like
zend framework中使用memcache的方法
2016/03/04 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
动态创建类实例代码
2009/10/07 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
python中pyplot基础图标函数整理
2020/11/10 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
军神教学反思
2014/02/04 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
自荐信格式模板
2015/03/27 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫