有两种最常用的方法来允许使用Angular 2进行拖放。首先是使用基于Angular的开源库之一(有几个);其次是使用jQuery UI库进行拖放。经过一番调查后,我发现其中大部分都是为Angular 1.x制作的,并且仍然不支持我需要的所有功能。
所以我决定使用jQuery使用它的TypeScript库来实现拖放操作。
支持拖动&下载开始获取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
拖放具有用于执行两个方面:
- 一些容器,其允许组件内部可投放容器
- 组分,其将被丢弃允许拖动可拖动组件
在我的实现中,董事会广场是droppable的地方可以放下件和可拖动块可拖动两平方之间。为了支持这一点,使现有的广场(HTML模板)添加CSS类droppable-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
为了实现拖动和投掷的,创建了一个名为PieceMover新的类,它有逻辑,使作品活动。如下面的代码库所示,它使得上面的CSS类可拖放,并且限制只允许将块放在正方形而不是正方形之外。在拖放过程中显示寄存器的逻辑几乎没有其他逻辑可以将鼠标悬停在其上。
依赖注入 - 角2
依赖注入的角度2.最有价值的特征,因为任何丰富的服务器端开发语言,如C#中的一个,Java允许有IoC容器,支持依赖注射,同样Angular 2允许DI。依赖注入允许解耦类之间的依赖关系并支持模块化开发。如PieceMover
上面的类代码所示,该类使用@Injectable()
进行修饰,这表示Angular 2的DI容器可以注入该类。请注意,PieceMover
类代码的第一行的Injectable导入。
在这种情况下,BoardComponent
的使用者类将“providers”数组用于特定的依赖项,这些依赖项需要由Angular 2 DI容器来解决。构造函数采用将由DI注入/解析的类型为PieceMover
的参数。在解决如上所述的依赖关系之后,在显示板BoardComponent
调用方法MakePiecesMovable()
方法之后,它使棋子移动到棋盘格。
UPD:如果不作处理自定义实现,你可以使用一些库从这个名单:
现在有一个问题好友,当我设置一个component.ts类并尝试从'ng2-dragula/ng2-dragula'导入导入{Dragula,DragulaService};所以我可以使用Dragula和DragulaService intellij没有得到它......你看到有错误的导入? @rinukkusu –
没有相关的解决方案 –