通过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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
js运动应用实例解析
Dec 28 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 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
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
javascript事件问题
2009/09/05 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python argv用法详解
2016/01/08 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python构建自定义回调函数详解
2017/06/20 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Flask框架配置与调试操作示例
2018/07/23 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python 爬取小说并下载的示例
2020/12/07 Python
python 调用Google翻译接口的方法
2020/12/09 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
J2EE模式面试题
2016/10/11 面试题
英语演讲稿范文
2014/01/03 职场文书
学校运动会简讯
2015/07/20 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python