drag使用总结

1、html5基础用法：
设置属性：draggable=true，属性规定元素是否可拖动。

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。
</p>

2、angular 项目中使用DragDropModule
1）使用方法：在module.ts中引入DragDropModule
对应的ts文件中引入

import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

页面代码；

<div class="drag-test" #drag (cdkDropListDropped)="drop($event)">
                <div class="item-line-wrap flex-row" *ngFor="let item of dingList" cdkDrag>
                    <span>{{item.name}}</span>
                    <span class="move-item">拖这里</span>
                </div>
            </div>

ts 中：

 drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.dingList, event.previousIndex, event.currentIndex);
    }

3. 使用query 插件 sortable