如何使用角度2（v2.0.0-beta.15）

Question

我想在angular中实现一个简单的拖放列表，例如我可以更改其订单的杂货清单。

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

（我正在使用打字稿）

如果有人以其他方式使用其他方式重新排序列表，并且可以提供一个也将受到祝福的示例。

Answer 1

有两种最常见的方法允许使用Angular 2拖放。首先使用一个基于Angular的开源库（有几个）;第二个是使用jQuery UI库进行拖放。经过一番调查后，我发现其中大部分都是为Angular 1.x制作的，但仍然不支持我需要的所有功能。

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

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

第1步

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

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

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

第2步

拖放有两个方面可供实现：

• 允许将组件放入可放置容器
内的容器
• 将允许拖动可拖动组件
的组件

在我的实现中，棋盘方块是可以放置的，其中可以丢弃碎片并且可以拖动碎片，可以在两个平方之间拖动。为了支持这一点，使现有的square（html模板）添加CSS类droppable-square，稍后将使用它来制作square droppable。并添加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>

第3步

为了实现draggable和droppable，创建了一个名为PieceMover的新类，它具有使片段可移动的逻辑。如下面的代码库所示，它使上面的CSS类可拖动＆amp;可放置，并限制只允许将棋子放在正方形而不是正方形之外。在拖放过程中显示寄存器的其他逻辑很少，其中的部分悬停在上面。

依赖注入 - Angular 2

依赖注入是Angular 2最有价值的特性之一。任何丰富的服务器端开发语言（如C＃，Java）都允许IoC容器支持依赖注入，类似的Angular 2允许DI。依赖注入允许解耦类之间的依赖关系并支持模块化开发。如上面PieceMover类代码中可见，该类用@Injectable()修饰，它向Angular 2的DI容器指示可以注入此类。另请注意PieceMover类代码的第一行中的Injectable导入。

在这种情况下，BoardComponent的消费者类使用＆＃34;提供商＆＃34;数组到Angular 2 DI容器需要解析的特定依赖项。构造函数采用类型PieceMover的参数，它将由DI注入/解析。在解决了上面提到的依赖关系之后，在显示棋盘BoardComponent调用方法MakePiecesMovable()方法之后，这会让棋子移动到棋方格上。

UPD ：如果您没有与自定义实施达成协议，您可以使用此列表中的一些库：

• ng2-draggable
• ng2-dragula

Answer 2

您可以使用Dragula 2 Github repo的特定修订版。

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

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

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

3 - 删除ng2-dragula中的node_modules文件夹，然后使用

从package.json重新安装

npm install

Answer 3

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

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

我刚刚添加到devDependencies：

Schedule

运行User我很高兴去使用github示例中的库。