2016-07-14 83 views
14

我想实现一个简单的拖放列表,例如可以更改其顺序的杂货列表。如何使用角2实现拖放(v2.0.0-beta.15)

Iv在使用https://github.com/akserg/ng2-dnd之前实现了它,但是我的问题是我使用的角度为2.0.0-beta.15,我目前无法升级它,所以我必须找到支持此版本的东西。 Iv试图寻找这个库的具体提交和没有适合我的版本。我需要这种确切的行为。 the more specific example of this library is。也许有人知道我可以自己做,甚至是,无论如何将是好的,更喜欢一些图书馆来节省时间。

(即时通讯使用的打字稿)

如果有人在其他一些方式解决其他用于重新排序列表,并且可以给也将被祝福的例子。

回答

0

好吧,那么fi首先感谢那些回答的人。

,帮助我的回答最多的是如何解决我与NG2-DND问题:

我刚加入devDependencies:

"ng2-dnd" : "1.5.0" 

运行npm install和我是好去并像使用github示例一样使用库。

1

您可以使用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前 - 删除ng2-dragula文件夹中node_modules并与您的package.json重新安装

npm install 
+0

现在有一个问题好友,当我设置一个component.ts类并尝试从'ng2-dragula/ng2-dragula'导入导入{Dragula,DragulaService};所以我可以使用Dragula和DragulaService intellij没有得到它......你看到有错误的导入? @rinukkusu –

+0

没有相关的解决方案 –

2

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

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

支持拖动&下载开始获取jQuery JavaScript文件到我的项目和index.html文件。在使用Angular + TypeScript项目之前获得jQuery文件之后,它需要jquery.d.tsjqueryui.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成如这里所示键入项目的文件夹中。

enter image description here

步骤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类可拖放,并且限制只允许将块放在正方形而不是正方形之外。在拖放过程中显示寄存器的逻辑几乎没有其他逻辑可以将鼠标悬停在其上。

enter image description here

依赖注入 - 角2

依赖注入的角度2.最有价值的特征,因为任何丰富的服务器端开发语言,如C#中的一个,Java允许有IoC容器,支持依赖注射,同样Angular 2允许DI。依赖注入允许解耦类之间的依赖关系并支持模块化开发。如PieceMover上面的类代码所示,该类使用@Injectable()进行修饰,这表示Angular 2的DI容器可以注入该类。请注意,PieceMover类代码的第一行的Injectable导入。

在这种情况下,BoardComponent的使用者类将“providers”数组用于特定的依赖项,这些依赖项需要由Angular 2 DI容器来解决。构造函数采用将由DI注入/解析的类型为PieceMover的参数。在解决如上所述的依赖关系之后,在显示板BoardComponent调用方法MakePiecesMovable()方法之后,它使棋子移动到棋盘格。

enter image description here

UPD:如果不作处理自定义实现,你可以使用一些库从这个名单: