通过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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
js同源策略详解
May 21 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
js实现简单数字变动效果
Nov 06 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
Vue3为什么这么快
Sep 23 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript radio 联动效果
2009/03/04 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
js表单验证实例讲解
2016/03/31 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python中functools模块函数解析
2017/03/12 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python递归法解决棋盘分割问题
2019/07/17 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
Java程序员常见面试题
2015/07/16 面试题
护士岗前培训自我评鉴
2014/02/28 职场文书
会计核算科岗位职责
2014/03/19 职场文书
实习指导老师评语
2014/04/26 职场文书
全陪导游词开场白
2015/05/29 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
详解python的异常捕获
2022/03/03 Python