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

通过导入@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页面元素拖放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • angularjs数组判断是否含有某个元素的实例

    也就是in_array函数,判断数组中是否含有某个元素. Array.prototype.in_array = function(e) { for(i=0;i<this.length;i++) { if(this[i] == e) return true; } return false; } 使用方法: tmp.in_array(id) 以上这篇angularjs数组判断是否含有某个元素的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: A

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • AngularJS遍历获取数组元素的方法示例

    AngularJS遍历获取数组元素的方法示例

    本文实例讲述了AngularJS遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取数组的元素例子</title> <script src="angular.min.js"></script> <s

  • 详解如何在Angular中快速定位DOM元素

    详解如何在Angular中快速定位DOM元素

    在使用Angular2+中,经常会想快速的去选择DOM上的某个元素,如果是刚上手Angular,有可能直接就使用原生DOM操作或者导入jQuery再进行DOM操作,既然都使用了Angular了,有没有更好的方法呢?答案是肯定的. 通过ElementRef 先上代码: import {Component, ElementRef, OnInit} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.

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

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

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

  • 对angular 监控数据模型变化的事件方法$watch详解

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

  • ChatGPT编程秀之最小元素的设计示例详解

    目录 膨胀的野心与现实的窘境 新时代,新思路 总结一下 膨胀的野心与现实的窘境 上一节随着我能抓openai的列表之后,我的野心开始膨胀,既然我们写了一个框架,可以开始写面向各网站的爬虫了,为什么只面向ChatGPT呢?几乎所有的平台都是这么个模式,一个列表,然后逐个抓取.那我能不能把这个能力泛化呢?可不可以设计一套机制,让所有的抓取功能都变得很简单呢?我抽取一系列的基础能力,而不管抓哪个网站只需要复用这些能力就可以快速的开发出爬虫.公司内的各种平台都是这么想的对吧? 那么我们就需要进行设计建模

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • javascript jquery对form元素的常见操作详解

    1.下拉框 select : 移除option $("#ID option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); 添加option $("<option value='111'>UPS Ground</option>").appendTo($("#ID")); 取得下拉选单的选取值 //取下拉選中的文本 $('#testSe

  • 如何利用@angular/cli V6.0直接开发PWA应用详解

    如何利用@angular/cli V6.0直接开发PWA应用详解

    什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • 对angular 实时更新模板视图的方法$apply详解

    有的时候在回调里面写了更新scope的里面的内容,视图上面竟然没有同时更新,这就用到了$apply Scope的特性 接下来,看看Scope有哪些特性呢? Scope提供$watch方法监视Model的变化. Scope提供$apply方法传播Model的变化. Scope可以继承,用来隔离不同的application components和属性访问权限. Scope为Expressions的计算提供上下文. 最简单的使用方法,就是在需要传递变化的地方写上以下代码 $scope.$apply()

  • numpy中三维数组中加入元素后的位置详解

    今天做数据处理时,遇到了从三维数组中批量加入二维数组的需求.其中三维数组在深度学习的特征数据处理时经常会使用到,所以读者有必要对该小知识点做到清楚了解并掌握.现对三维数组中的元素位置结合代码做详细归纳总结,方便日后查阅和为网友答疑! 图示效果图: 直接贴代码: def test3D(): import numpy as np data_array = np.zeros((3, 5, 6), dtype=np.int) data_array[1, 2, 2] = 1 print(data_arra

  • vue实现的多页面项目如何优化打包的步骤详解

    遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. 如何优化 使用cdn引入,这种就每次新建一个页面的时候手动通过cdn的方式引入,但是并不是特别好的方式,还需要手动加入. 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自

随机推荐