angualr2以上版本
    我使用的是angualr6.x最新版
    https://github.com/valor-software/ng2-dragula

    1. 1.安装依赖
    2. npm install ng2-dragula
    3. # or
    4. yarn add ng2-dragula
    6. 2.添加这一行到你的 polyfills.ts:
    7. (window as any).global = window;
    9. 3.引入模块    DragulaModule.forRoot() 如下：
    10. import { DragulaModule } from 'ng2-dragula';
    11. @NgModule({
    12.   imports: [
    13.     ...,
    14.     DragulaModule.forRoot()
    15.   ],
    16. })
    17. export class AppModule { }
    19. 4.引入公用css node_modules/dragula/dist/dragula.css
    20. 或者直接复制所有css放styles.scss文件
    22. 5.使用指令，给一个自定义名称，随意的字符串就行，标识一个div的内容可以拖拽，dragula="div1"和 [dragula]="Vampires"意义等同 代码如下
    23. <ul dragula="div1">
    24.   <li>Dracula</li>
    25.   <li>Kurz</li>
    26.   <li>Vladislav</li>
    27.   <li>Deacon</li>
    28. </ul>
    30. 6.多个div需要拖拽如下
    31. <div dragula="div1">
    33. </div>
    34. <div dragula="div2">
    36. </div>
    37. <div dragula="div3">
    39. </div>
    40. 7. 如果需要双向绑定拖拽的数据 [(dragulaModel)]
    42.  [(dragulaModel)]等同于 [dragulaModel]="vampires" (dragulaModelChange)="vampires = $event" 类似ng自带的[(ngModel)]
    44. <ul dragula="VAMPIRES" [(dragulaModel)]="vampires">
    45.   <li *ngFor="let vamp of vampires">
    46.     {{ vamp.name }} likes {{ vamp.favouriteColor }}
    47.   </li>
    48. </ul>
    49. 等同于
    50. <ul dragula="VAMPIRES" [dragulaModel]="vampires" (dragulaModelChange)="vampires = $event">
    51.   ...
    52. </ul>
    54. 8.拖拽过程中的事件订阅
    55. import { Subscription } from 'rxjs';
    56. import { DragulaService } from 'ng2-dragula';
    58. export class MyComponent {
    59.   // RxJS Subscription is an excellent API for managing many unsubscribe calls.
    60.   // See note below about unsubscribing.
    61.   subs = new Subscription();
    63.   constructor(private dragulaService: DragulaService) {
    65.     // These will get events limited to the VAMPIRES group.
    67.     this.subs.add(this.dragulaService.drag("VAMPIRES")
    68.       .subscribe(({ name, el, source }) => {
    69.         // ...
    70.       })
    71.     );
    72.     this.subs.add(this.dragulaService.drop("VAMPIRES")
    73.       .subscribe(({ name, el, target, source, sibling }) => {
    74.         // ...
    75.       })
    76.     );
    77.     // some events have lots of properties, just pick the ones you need
    78.     this.subs.add(this.dragulaService.dropModel("VAMPIRES")
    79.       // WHOA
    80.       // .subscribe(({ name, el, target, source, sibling, sourceModel, targetModel, item }) => {
    81.       .subscribe(({ sourceModel, targetModel, item }) => {
    82.         // ...
    83.       })
    84.     );
    86.     // You can also get all events, not limited to a particular group
    87.     this.subs.add(this.dragulaService.drop()
    88.       .subscribe(({ name, el, target, source, sibling }) => {
    89.         // ...
    90.       })
    91.     );
    92.   }
    94.   ngOnDestroy() {
    95.     // destroy all the subscriptions at once
    96.     this.subs.unsubscribe();
    97.   }
    98. }

    还有一个非常棒的插件可以看看
    https://github.com/xieziyu/angular2-draggable