推荐使用Angular Drag & Drop：轻松实现拖放功能

最新推荐文章于 2024-06-10 09:40:10 发布
最新推荐文章于 2024-06-10 09:40:10 发布
阅读量422 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00030/article/details/139230519
版权

推荐使用Angular Drag & Drop：轻松实现拖放功能

ng-drag-dropDrag & Drop for Angular - based on HTML5 with no external dependencies. :tada:项目地址:https://gitcode.com/gh_mirrors/ng/ng-drag-drop

警告：项目已终止

请注意，这个Angular Drag & Drop库的作者在大约两年前创建了它以支持HTML5原生拖放，并提供了一些特性。然而，随着Angular 7的发布以及CDK（组件开发工具包）中的拖放组件，现在有了一个更好的替代方案。我们强烈建议您使用官方的Angular CDK Drag Drop。

尽管如此，以下是关于Angular Drag & Drop项目的详细信息，对于那些仍在寻找旧版本解决方案的开发者可能会有所帮助：

1. 项目介绍

Angular Drag & Drop是一个基于HTML5的轻量级拖放库，无需任何外部依赖。它提供了draggable和droppable指令，使您可以轻松地在Angular应用中实现拖放交互。特色包括数据传输、范围限制、拖动手柄定制、自定义视觉提示等。

2. 技术分析

该库利用了浏览器的原生HTML5拖放API，确保跨平台兼容性。通过提供指令，它使得与Angular应用程序的集成变得简单直接。此外，它还支持以下高级功能：

  • 数据传递
  • 拖放范围限制
  • 手柄限定拖动
  • 自定义拖放辅助图像
  • 自定义视觉提示样式

3. 应用场景

  • 构建文件管理器
  • 创建可重组的列表或网格布局
  • 设计动态表单构建器
  • 编辑复杂的界面布局
  • 在页面元素之间转移数据

4. 项目特点

  • 无依赖：完全基于Angular和HTML5，易于整合。
  • 直观的API：通过简单的指令，如draggable和droppable，快速上手。
  • 灵活的数据传递：可以在拖放操作中传递数据。
  • 范围控制：通过设置dragScope和dropScope，可以限制元素的拖放行为。
  • 自定义视觉反馈：允许添加不同的CSS类，以便在拖放过程中显示视觉提示。
  • 拖放手柄：只允许从特定区域启动拖动操作。
  • 自定义拖放辅助图像：为拖动操作提供自定义的视觉效果。

虽然这个项目已经不再维护，但其设计思路和实现方式仍能为开发者提供灵感，尤其适用于那些寻求对Angular拖放功能进行自定义的场景。

总结 虽然Angular CDK的拖放组件是首选，但是Angular Drag & Drop作为历史上的一个优秀解决方案，仍然值得我们回顾和学习。对于某些特殊需求或者不希望引入新库的项目，它可以作为一个备选方案。

ng-drag-dropDrag & Drop for Angular - based on HTML5 with no external dependencies. :tada:项目地址:https://gitcode.com/gh_mirrors/ng/ng-drag-drop

秦贝仁Lincoln
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
angular-drag:一个简单的指令，用于拖动给定容器中的元素，仅依赖于angular提供的jqlite
05-15
角拖 一个简单的指令，它仅依赖于angular提供的jqlite来拖动给定容器中的元素。 执照 MIT许可证（MIT） 版权所有（c）2016 drayvock 特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，包括但不限于使用，复制，修改，合并的权利，发布，分发，再许可和/或出售本软件的副本，并允许具备软件的人员这样做，但须满足以下条件： 以上版权声明和此许可声明应包含在本软件的所有副本或大部分内容中。 本软件按“原样”提供，不提供任何形式的明示或暗示担保，包括但不限于对适销性，特定目的的适用性和非侵权性的担保。 无论是由于软件，使用或其他方式产生的，与之有关或与之有关的合同，侵权或其他形式的任何索赔，损害或其他责任，作者或版权所有者概不负责。软件。
Unity Rigidbody 刚体中的Angular Drag和Freeze Position/Rotation
weixin_30649641的博客
10-11 796
Rigidbody中Angular Drag（角阻力）：同样指的是空气阻力，只不过是用来阻碍物体旋转的。如果设置成无限的话，物体会立即停止旋转。如果设置成0，物体在上升过程中，会发生侧翻旋转。 Freeze Position/Rotation（冻结位置/旋转）： 可以对物体在X、Y、Z三个轴上的位置/旋转进行锁定，即使受到相应的力也不会改变，但可以通过脚本来修改。否则物体在上升...
推荐开源项目：AngularDrop - 无jQuery的AngularJS拖放功能库
最新发布
gitblog_00042的博客
06-10 271
推荐开源项目：AngularDrop - 无jQuery的AngularJS拖放功能库 项目地址:https://gitcode.com/caitp/angular-drop 项目介绍 AngularDrop是一款专为AngularJS设计的轻量级拖放功能库，无需依赖jQuery。它提供了一套简单易用的构建模块，帮助开发者实现丰富和复杂的拖放交互体验。项目由Caitlin Potter发起，并鼓励...
angular-drag - 基于Angularjs的拖拽指令
热门推荐
jac.song的专栏
04-18 1万+
原文地址：http://www.open-open.com/lib/view/open1452255462401.html angular-drag 基于 AngularJS 的拖拽指令 支持 GPU 加速支持边界限制支持设置拖拽把柄移动端与 PC 端通用 使用 支持使用 script 标签或者 webpack、requirejs、seajs 调用： scrip
Angular6 实现拖拽功能指令 drag
weixin_34112181的博客
08-30 2604
1. 指令代码 import { Directive, ElementRef, OnInit, HostListener } from '@angular/core'; @Directive({ selector: '[appDrag]' }) export class DragDirective implements OnInit...
使用jQuery Draggable和Droppable实现拖拽功能
weixin_34121282的博客
06-24 243
上篇博客中已经介绍了web开发中基本拖放原理，现在给出需要完成的功能。最后运行的效果如下图所示： 主要功能需求说明： 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成，能支持多级元素。父节点可以折叠起来 2.用户可以通过拖放的操作，将元素从左侧拖放到右侧。如果是拖的父节点元素，那么需要把它子节点的元素一并拖到右边 3.元素放到右侧，右侧可以接受元素的区域有2种可能。一种...
angular-drag-drop:实现可拖放实用程序的 AngularJS 插件
06-01
"angular-drag-drop" 插件就是专门为AngularJS设计的一个库，旨在简化在AngularJS应用中实现拖放操作的过程。 这个插件允许开发者轻松地将拖放功能集成到他们的AngularJS项目中，提供了一套直观的API和指令，使得...
dragAndDrop:测试 Angular 拖放功能
07-01
在Angular框架中，实现拖放（Drag and Drop）功能是一项常见的需求，特别是在构建交互式用户界面时。这个项目，名为“dragAndDrop”，显然专注于测试Angular应用中的拖放功能。让我们深入探讨一下如何在Angular中...
angular-drag-and-drop:简单的Angular拖放库
05-13
安装npm install angular-drag-and-drop-lib 用法为了访问库指令和组件，您必须从项目中导入AngularDragAndDropLibModule 。 import { AngularDragAndDropLibModule } from 'angular-drag-and-drop-lib';...@...
Angular-DragAndDrop:提供一个用于拖放行为的角度模块，
05-09
Angularjs-DragAndDrop 和Angularjs模块一起实现HTML5拖放行为。演示阅读HTML5拖放（好奇） 为了更好地理解，请阅读： : 可拖动::指令Draggable属性必须包含将传递给droppable的模型。 例如其中myModel在父控制器...
drag-and-drop:拖放概念证明
03-08
在"drag-and-drop-master"这个压缩包文件中，可能包含了实现拖放功能的示例代码、教程或者一个演示项目。通过学习和分析这些内容，开发者可以加深对拖放技术的理解，并将其应用于自己的项目中，提升用户体验。
angular-drop:AngularJS中的拖放功能，无需jQuery
04-14
角度下降 AngularJS中的拖放功能，无需jQuery | AngularDrop为AngularJS中的拖放功能提供了简单的构建块。 拖放操作是一个相当复杂的用户交互，即使乍看之下似乎微不足道。 范围概念使AngularJS变得更加复杂，这可能对拖放节点的内容产生重大影响。 我并没有声称对在复杂的应用程序中实现拖放功能所提出的任何或所有问题都有答案，但是我有兴趣找出答案，以便我们可以为我们的应用程序用户提供最佳体验。 带着最好的意图，希望我们能够提供： 全面支持移动应用 巧妙地处理范围变更 拖放元素时触发范围事件 支持在嵌套浏览上下文之间进行拖放 支持在不同窗口之间拖放 该库不仅是一对指令，而且实际上还是构建具有特殊拖放行为的自定义指令的构建块。 安装 Angular-drop现在已在凉亭上注册！ 您可以按预期安装，如下所示： bower install angular
angular-drop, 在AngularJS中，不需要任何 jQuery，拖动&拖放功能.zip
10-10
angular-drop, 在AngularJS中，不需要任何 jQuery，拖动&拖放功能 AngularDrop 在AngularJS中拖放&拖放功能，无需 jQuery演示 | 文档AngularDrop为AngularJS中拖拉&拖放功能提供了简单的构建块。拖拉&是一个相当复杂
angular-drop:带流星的角网格框架
06-01
启动用于 WhiteBoard 的 Meteor-Angular 应用程序
angular-tree-dnd：通过AngularJS显示树表（或列表）和事件Drap＆Drop（允许拖动多树表，包括所有类型：table，ol，ul）
02-03
[Angular 1.x]按树显示treeDnD和事件DrapnDrop，字段“ td”。 </ s> </ s> </ s> ###支持（仅当我在线时） 演示： ＃＃＃需求： angular: >=1.2.1 来源（> = 3.0.4） http://thienhung1989.github.io/angular-tree-dnd/3.0.4/ng-tree-dnd.css http://thienhung1989.github.io/angular-tree-dnd/3.0.4/ng-tree-dnd.js http://thienhung1989.github.io/angular-tree-dnd/3.0.4/ng-tree-dnd.min.js 安装凉亭： bower install angular - tree - dnd npm install angular - tree - dnd 问题 大数据不好（使用scrollInfinite开发的数据将很快更新）。 特征 显示2种类型的数据树：Table-Grid＆List （ul，ol） 。 拖放。 过滤数据
DragAndDrop:拖放角度
03-07
拖 该项目是使用版本11.0.2生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
自定义拖拽面板angular7_Angular7 Drag and Drop
weixin_39968801的博客
12-24 422
完整代码在最后，下面讲解以此代码为例1.环境配置1.1 安装@angular/material、@angular/cdkcnpm install --save @angular/material@angular/cdk1.2 app.modules.ts导入import{ DragDropModule} from'@angular/cdk/drag-drop';imports:[...D...
U3D Rigidbody_2_属性篇_01_angularDrag
Dean272727的博客
01-07 1207
Properties 1.angularDrag : 对象的角阻力 对象的角阻力。角阻力可用于减慢对象的旋转。阻力越大，旋转越慢。 [1].创建爆炸点（4个），当按下“R”键时，产生爆炸力。 using UnityEngine; public class ExplosionPoint : MonoBehaviour { private float radius; private ...
Angular-DragDrop（二）：解决使用angular-draggable-droppable插件拖拽穿透冒泡事件问题
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
08-13 1531
先看下问题展示吧 问题描述： 拖拽存放容器内带有拖拽存放容器，会产生当拖拽到最里层容器时候冒泡到外层容器中，导致两层容器重复获取数据 问题展示 蓝色区域 - 绿色区域 安装使用angular-draggable-droppable 安装 npm i angular-draggable-droppable yarn add angular-draggable-droppable 基本使用<div mwlDraggable [dropData]="{ data: '
angular实现拖放
05-18
Angular提供了一个名为`@angular/cdk/drag-drop`的模块，用于实现拖放功能。下面是一个简单的示例： 1. 首先，需要在模块中导入`DragDropModule`： ```typescript import { NgModule } from '@angular/core'; import { DragDropModule } from '@angular/cdk/drag-drop'; @NgModule({ imports: [ DragDropModule ] }) export class AppModule { } ``` 2. 在组件模板中，使用`cdkDrag`和`cdkDropList`指令来实现拖放： ```html <div cdkDropList (cdkDropListDropped)="onDrop($event)"> <div *ngFor="let item of items" cdkDrag>{{item}}</div> </div> ``` 这个示例中，我们创建了一个拖放列表，其中每个项目都带有`cdkDrag`指令。当用户将项目拖到另一个项目上时，`cdkDropListDropped`事件将被触发。 3. 在组件类中，实现`onDrop()`方法来处理拖放事件： ```typescript export class AppComponent { items = ['Item 1', 'Item 2', 'Item 3']; onDrop(event: CdkDragDrop<string[]>) { moveItemInArray(this.items, event.previousIndex, event.currentIndex); } } ``` 在这个示例中，我们使用`moveItemInArray()`函数来移动项目的位置。 以上就是一个简单的Angular实现拖放的示例。更多高级用法，可以参考官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秦贝仁Lincoln

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值