通过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 函数式编程的原理
Oct 16 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
input框中的name和id的区别
Nov 16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
一个捕获函数输出的函数
2007/02/14 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
门卫岗位安全职责
2013/12/13 职场文书
北京大学自荐信范文
2014/01/28 职场文书
教师新年寄语
2014/04/03 职场文书
药品业务员岗位职责
2014/04/17 职场文书
党员年终个人总结
2015/02/14 职场文书
2015中秋祝酒词
2015/08/12 职场文书