通过angular CDK实现页面元素拖放的步骤详解

 更新时间:2020年07月01日 08:39:46   作者:DeathGhost  
这篇文章主要给大家介绍了关于如何通过angular CDK实现页面元素拖放的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

通过导入@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 drag-drop

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

拖动元素内指定拖动控制,如:

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

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

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

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

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页面元素拖放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Angular8 Http拦截器简单使用教程

    Angular8 Http拦截器简单使用教程

    这篇文章主要介绍了Angular8 Http拦截器简单使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 深究AngularJS之ui-router详解

    深究AngularJS之ui-router详解

    本篇文章主要介绍了深究AngularJS之ui-router详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 如何在AngularJs中调用第三方插件库

    如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,这篇文章主要介绍了如何在AngularJs中调用第三方插件库,有兴趣的可以了解下
    2017-05-05
  • Angular的自定义指令以及实例

    Angular的自定义指令以及实例

    本文主要介绍了Angular的自定义指令,并提供了实例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • AngularJS基础 ng-keypress 指令简单示例

    AngularJS基础 ng-keypress 指令简单示例

    本文主要介绍AngularJS ng-keypress 指令,这里帮大家整理了基础资料,并附是示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • Angular开发者指南之入门介绍

    Angular开发者指南之入门介绍

    本篇文章主要介绍了Angular开发者指南的入门知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 在 Angular 中获取当前日期的方法

    在 Angular 中获取当前日期的方法

    我们将通过示例介绍一种在 Angular 应用程序中获取当前日期的简单方法,我们还将解决如何更改 Angular 中的日期格式,对在Angular中获取当前日期感兴趣的朋友跟随小编一起看看吧
    2023-05-05
  • angularJs select绑定的model取不到值的解决方法

    angularJs select绑定的model取不到值的解决方法

    今天小编就为大家分享一篇angularJs select绑定的model取不到值的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • angularjs1.5 组件内用函数向外传值的实例

    angularjs1.5 组件内用函数向外传值的实例

    今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angular使用TweenMax动画库的问题和解决方法

    angular使用TweenMax动画库的问题和解决方法

    这篇文章主要给大家介绍了关于angular使用TweenMax的相关问题和解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论