angular跳转指定页面_通过 angular CDK 实现页面元素拖放

通过导入@angular/cdk/drag-drop模块我们可以轻松实现元素在页面中得拖放功能，如元素在页面中随意拖动、在特定区域内拖动亦或对列表进行拖放排序等等。

通过 angular CDK 实现页面元素拖放www.deathghost.cn

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>

即可实现自由拖动效果。

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

拖动元素内指定拖动控制，如：

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

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

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

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

如在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跳转指定页面_通过 angular CDK 实现页面元素拖放相关推荐

java浏览器刷新页面_使用js刷新浏览器页面
reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) ...
iframe 覆盖父页面_一次iframe子页面与父页面的通信
事件回顾: 收到需求,说是要在别人的系统里嵌入目前由我维护的系统,嵌入的逻辑不多,只有一个创建流程. 刚开始觉得没什么,不就是你改改,我改改,你给我url加个参数,我知道是你调用,修改下页面balab ...
显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
404 找不到页面_找不到404页面设计，如何创建较大的错误页面
404 找不到页面 What's an error page for you? A reason for feeling confused and annoyed? A bit of a bother ...
angular跳转指定页面_angular怎么做前端页面跳转？
Angular中每个页面的显示都需要三个要素:页面的代码,控制器和页面的URL;当要在同一个页面上呈现不同的视图时,这就需要配置路由啦;angular.js已经为我们封装了一个独立的路由工具ng-ro ...
angular select设置默认选中_改进 Angular + Jest 项目中组件测试的调试
@angular-extensions/pretty-html-log 原文链接medium.com原作者:Kevin Kreuzermedium.com 译者: 知乎用户www.zhihu.c ...
java jsp公共异常页面_实际应用中JSP页面的异常处理
打开浏览器,访问一个链接或者输入url,"咚"的敲下回车... 哗啦啦,一大堆看不懂的异常信息一下×××出来,塞满整个页面,我勒个去,吓死人了... 在实际开发中,用户访问网站的时 ...
404 错误页面_如何设计404错误页面，以使用户留在您的网站上
404 错误页面重点 (Top highlight) 网站设计 (Website Design) There is a thin line between engaging and enraging ...
路由到另外一个页面_如何在多个页面中，引入一个公共组件
应用场景在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中.常见的有,头部菜单栏.底部版权,如下图中的菜单,就需要在不同页面中进行显示. 解决方法假设有这样一个需求,希望 ...

angular跳转指定页面_通过 angular CDK 实现页面元素拖放

angular跳转指定页面_通过 angular CDK 实现页面元素拖放相关推荐

最新文章

热门文章