伏龙阁资源网

通过angular CDK实现页面元素拖放的步骤详解
站长资源 2024/11/25 佚名
2 0

通过导入@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"控制。

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

总结

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接