angular2 支持排序的拖拽组件ng2-dragula

 

  最近项目上遇到需要拖拽的需求,于是就在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 };

 

 

(本文原创,转载请注明出处!!)

 

posted @ 2017-10-12 09:53  木子的紫微星  阅读(3353)  评论(1编辑  收藏  举报