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

import { DragulaModule } from 'ng2-dragula'; 2 
@NgModule({ 4  imports: [ 5  DragulaModule, 6  ], 7 })

 

三、引入主要的css

css位置：node_modules/dragula/dist/dragula.css。主要樣式如下：

.gu-mirror{position: fixed ; margin: 0 ; z-index: 9999 ; opacity: 0.8; }
.gu-hide{display: none ;}
.gu-unselectable{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.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，我們可以根據需求自己任意修改。

部分代碼如下：
<div class="container" [dragula]='"dragulaBag"' [dragulaModel]='list1'
[dragulaOptions]="options" (mouseover)="onMouseover(0)" (mouseout)="onMouseout(0)">
    <div *ngFor="let lev_2 of list1;let i =index" [class.boxBg]="list1">
        <div class="lev_2_li">
            <i class="lev_2_drag">
            </i>
            <input class="lev_2_input" type="text" maxlength="30" placeholder="二級分類(必填)"
            [tlEditFocus]="lev_2.selected" [hidden]="!lev_2.selected" [(ngModel)]="lev_2.name">
            <a class="lev_2_name" title="{{lev_2.name}}" (dblclick)="onEdit(lev_2)"
            [hidden]="lev_2.selected">
                {{lev_2.name}}
            </a>
            <span class="lev_2_delete" (click)="onDelete(list1,i)">
            </span>
        </div>
    </div>
</div>

 設置每列滿5個則不可以拖拽，以及紅色框部分出發拖拽，都可以通過重新設置options，ts代碼如下：

public options = {
    accepts: (el, target, source, sibling) = >{
        if (target.children.length >= 5) {
            return false;
        }
        return true;
    },
    moves: function(el, container, handle) {
        return handle.className === 'lev_2_drag';
    }
};

 

 

（本文原創，轉載請注明出處！！）