Angular 元素拖拽

• 拖動元素到指定區域

• 拖放的同時傳遞數據

---

1. 安裝 ng2-drag-drop

    npm install ng2-drag-drop --save

2. 模板中配置可拖拽元素

    // drag.component.html
    <div>
        <a href="javascript:;" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
    </div>

• draggable - 表明此元素時可拖拽的

• [dragData] = 'item' - 在拖動過程中將item數據從draggable到droppable

• [dragScope]="'system'" - 拖拽范圍，和第三步[dropScope]="'system'"相對應；

3. 模板中配置拖拽元素所拖拽的目的地

    // drag.component.ts
    <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>

• droppable - 第二步中拖拽的元素都將拖拽到有droppable指令的元素內；

• (onDrop) - 當拖拽元素至此區域內后(鼠標釋放后)，觸發onItemDrop方法，其中$event就是第二步中[dragData] = 'item'的item參數

• [dropScope]="'system'" - 和第二步的[dragScope]="'system'"對應，[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素內；

4. ts文件

// drag.component.ts
export class DragComponent {

    const sysData = [
        {id: '1', name: '拖動元素1'},
        {id: '2', name: '拖動元素2'},
        {id: '3', name: '拖動元素3'},
        {id: '4', name: '拖動元素4'}
    ];

}

onItemDrop(e: any) {
    // data為拖拽時傳遞的數據 - item
    const data = e.dragData;

}