最近项目上遇到需要拖拽的需求，于是就在github上找了一些相关组件，最后看中了ng2-drag-drop和ng2-dragula，但是ng2-drag-drop组件本身拖拽的时候不支持拖拽元素放在拖拽目标的任意位置，只能放置在拖拽目标那一列的最后。所以最后使用了ng2-dragula。
github地址：https://github.com/valor-software/ng2-dragula
需求如下图：可以添加新的栏目，可以删除（删除时需要判断此栏目下是否有上架的图书），拖拽红色框区域可以移动到其他地方，每列二级栏目超过5个则不能拖拽其他栏目进来，每个栏目（含一级和二级）可以双击编辑。
一、安装
npm install ng2-dragula --save
二、在module文件引入DragulaModule
1 import { DragulaModule } from 'ng2-dragula';
2
3 @NgModule({
4 imports: [
5 DragulaModule,
6 ],
7 })
三、引入主要的css
css位置：node_modules/dragula/dist/dragula.css。主要样式如下：
1 .gu-mirror{position: fixed ; margin: 0 ; z-index: 9999 ; opacity: 0.8; }
2 .gu-hide{display: none ;}
3 .gu-unselectable{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
4 .gu-transit{opacity: 0.2;}
四、使用
HTML中，可以使用指令[dragula]='"dragulaBag"' ，dragula是设置可以拖放的区域，如果所有container都不设置，那默认是所有区域都可以拖放；如果设置不一样的，那么只可以在dragula相同的区域相互拖拽。
还可以使用[dragulaModel]='xx'，<ul [dragulaModel]='items'> <li *ngFor="let item of items"></li> </ul>如果有拖拽，items的值会自动修改，保存时直接提交items数据即可，非常方便。
也可以自己设置[dragulaOptions]="options"，options有一些默认的设置，如默认所有区域可以拖拽，默认拖拽时不可以copy，我们可以根据需求自己任意修改。
1 部分代码如下： 2 <div class="container" [dragula]='"dragulaBag"' [dragulaModel]='list1' 3 [dragulaOptions]="options" (mouseover)="onMouseover(0)" (mouseout)="onMouseout(0)"> 4 <div *ngFor="let lev_2 of list1;let i =index" [class.boxBg]="list1"> 5 <div class="lev_2_li"> 6 <i class="lev_2_drag"> 7 </i> 8 <input class="lev_2_input" type="text" maxlength="30" placeholder="二级分类(必填)" 9 [tlEditFocus]="lev_2.selected" [hidden]="!lev_2.selected" [(ngModel)]="lev_2.name"> 10 <a class="lev_2_name" title="{{lev_2.name}}" (dblclick)="onEdit(lev_2)" 11 [hidden]="lev_2.selected"> 12 {{lev_2.name}} 13 </a> 14 <span class="lev_2_delete" (click)="onDelete(list1,i)"> 15 </span> 16 </div> 17 </div> 18 </div>
设置每列满5个则不可以拖拽，以及红色框部分出发拖拽，都可以通过重新设置options，ts代码如下：
1 public options = { 2 accepts: (el, target, source, sibling) = >{ 3 if (target.children.length >= 5) { 4 return false; 5 } 6 return true; 7 }, 8 moves: function(el, container, handle) { 9 return handle.className === 'lev_2_drag'; 10 } 11 };
（本文原创，转载请注明出处！！）