如何使用 angular 2 (v2.0.0-beta.15) 实现拖放

Posted 2023-03-13

【中文标题】如何使用 angular 2 (v2.0.0-beta.15) 实现拖放

【英文标题】：How to implement drag and drop using angular 2 (v2.0.0-beta.15)

【发布时间】：2016-11-17 06:36:21

【问题描述】：

我想实现一个简单的 Angular 拖放列表，例如我可以更改其顺序的杂货列表。

我在使用 https://github.com/akserg/ng2-dnd 之前实现了它，但我的问题是我使用 angular 2.0.0-beta.15 并且我目前无法升级它，所以我必须找到支持这个版本的东西。 Iv 试图寻找这个库的特定提交，但没有任何适合我的版本。我需要那种确切的行为。 the more specific example of this library is 。也许有人知道我什至可以自己做，反正会很好，更喜欢一些图书馆以节省时间。

（我使用打字稿）

如果有人以其他方式有其他解决方案来重新排序列表，并且可以举一个例子，这也将受到祝福。

【参考方案1】：

使用 Angular 2 允许拖放有两种最常见的方法。第一种是使用基于 Angular 的开源库之一（有几个）；其次是使用 jQuery UI 库进行拖放。经过一番调查，我发现它们中的大多数都是为 Angular 1.x 制作的，并且仍然不支持我需要的所有功能。

所以我决定使用 jQuery 的 TypeScript 库来实现拖放。

要支持拖放，首先将 jQuery javascript 文件放入我的项目和 index.html 文件中。在 Angular + TypeScript 项目中使用之前获取 jQuery 文件后，它需要 jquery.d.ts 和 jqueryui.d.ts 这将为拖放提供特定于类型的实现。

第一步

在项目根目录执行以下命令：

// install tsd
npm install tsd -g
// install jquery.d.ts
tsd install jquery --save
// install jqueryui.d.ts
tds install jqueryui --save

以上命令会将 jQuery 的类型特定映射安装到项目的类型文件夹中，如下所示。

第 2 步

拖放有两个方面的实现：

一些容器允许将组件放置在

可放置容器

中 允许拖动

可拖动组件

的组件

在我的实现中，棋盘方块是可放置的，其中可以放置棋子，棋子是可拖动的，可以在两个方格之间拖动。为了支持这一点，使现有的正方形（html 模板）添加 CSS 类droppable-square，稍后将使用它来使正方形可放置。并添加 CSS 类draggable-piece 使棋子可拖动。

<div *ngFor="let files of Board.Files, let i = index">
  <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'">
    <span class="square-name">Board.Squares[7-i][j].SquareId</span>
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div>
  </div>
</div>

第三步

为了实现可拖动和可放置，创建了名为 PieceMover 的新类，该类具有使片段可移动的逻辑。如以下代码库所示，它使上述 CSS 类可拖动和可放置，并限制只允许将块放置在正方形而不是正方形之外。在拖放过程中，几乎没有额外的逻辑来显示边框。

依赖注入——Angular 2

依赖注入是 Angular 2 最有价值的特性之一。与任何丰富的服务器端开发语言（如 C#）一样，Java 允许拥有 IoC 容器来支持依赖注入，类似地，Angular 2 允许 DI。依赖注入允许解耦类之间的依赖并支持模块化开发。正如在PieceMover 类代码中可见，该类上面的类代码用@Injectable() 装饰，这表明Angular 2 的DI 容器可以注入该类。还要注意 PieceMover 类代码第一行中的 Injectable 导入。

在这种情况下，BoardComponent 的消费者类使用“提供者”数组来处理需要由 Angular 2 DI 容器解析的特定依赖项。构造函数采用 PieceMover 类型的参数，该参数将由 DI 注入/解析。如上所述解决依赖关系后，显示棋盘BoardComponent 调用方法MakePiecesMovable() 方法后，使棋子移动到棋子上。

UPD：如果您不处理自定义实现，您可以使用此列表中的一些库：

ng2-draggable ng2-dragula

【参考方案2】：

好的，首先感谢回答的人。

对我帮助最大的答案是如何解决我遇到的 ng2-dnd 问题：

我刚刚添加到 devDependencies：

"ng2-dnd" : "1.5.0"

运行npm install，我很高兴可以像在 github 示例中一样使用该库。

【参考方案3】：

您可以使用 Dragula 2 Github 存储库中的特定版本。

1 - 打开package.json 并滚动到"dependencies"

2 - 编辑 ng2-dragula 包到 Github 链接，并在他们切换到 RC.1 之前使用最后一次提交

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007"

3 - 删除node_modules 中的ng2-dragula 文件夹，然后从您的package.json 重新安装它

npm install

【讨论】：

现在有个问题，哥们，当我设置一个 component.ts 类并尝试从 'ng2-dragula/ng2-dragula' 导入 import Dragula, DragulaService;所以我可以使用 Dragula 和 DragulaService ，但 intellij 没有得到它......你看到那个导入有问题吗？ @rinukkusu