ng2-dragula 拖动排序

插件地址
https://github.com/valor-soft...
配置参数参考：
https://github.com/bevacqua/d...
首先根据插件教程安装和在module中配置插件。
拖动效果图

1、使用组件模式

html文件

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <ul dragula="VAMPIRES" [(dragulaModel)]="vampires" (dragulaModelChange)="dragFun($event)">
      <li *ngFor="let vamp of vampires">
        {{ vamp.name }} likes {{ vamp.value }}
      </li>
    </ul>
  </div>

  <div class="container" dragula="HANDLES" id="left">
    <div *ngFor="let vamp of vampires">
      <div class="handle">{{vamp.name}}</div>
      <div class="contents">Other content</div>
    </div>
  </div>
</ion-content>

ts文件

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
@Component({
  selector: "page-home",
  templateUrl: "home.html",
})
export class HomePage {
  vampires: any;
  constructor(
    public navCtrl: NavController
  ) {
    this.vampires = [
      {
        name: "zxc",
        value: 30
      },
      {
        name: "lzy",
        value: 5
      },
      {
        name: "cbr",
        value: 3
      },
      {
        name: "hp",
        value: 7
      }
    ];
  }
  // 拖动返回的是所有列表重新排序后的数组
  dragFun(event) {
    console.log(event);
  }
}

2、使用服务
index.html中引入一下文件

<link rel="stylesheet" type="text/css" href="assets/css/dragula.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/my_dragula.css">

注意：再ionic中如果把css卸载单独的界面中，拖动的时候会失去样式，所以把样式文件引入到index.html中

my_dragula.css

.list_content {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.list_item_content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border: 1px solid #eee;
  padding: 0 1rem;
}

.h_left {
  width: 2rem;
}

.h_center {
  flex: 1;
}

.h_right {
  width: 4rem;
}

.push_button span {
  display: block;
  width: 100%;
  height: 3rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pressclass {
  /* border: 1px solid #aaa; */
  box-shadow: 3px 3px 3px #777, -3px -3px 3px #999;
}

html文件

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content no-bounce class="no-scroll">
  <div class="list_content" id="drop">
    <div dragula="HANDLES">
      <div class="list_item_content" [ngClass]="{'pressclass': pc==i}" *ngFor="let item of arrs; let i = index">
        <div class="h_left" #values>
          {{item.number}}
        </div>
        <div class="h_center">
          {{item.content}}
        </div>
        <div class="h_right" (press)="presscFun(i)">
          <div class="push_button">
            <span class="handle">---</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>

ts文件

import { Component, ViewChildren, QueryList, ElementRef, ViewChild } from "@angular/core";
import { DragulaService } from "ng2-dragula";

import { Subscription } from "rxjs";
@Component({
  selector: "page-about",
  templateUrl: "./about.html"
})
export class AboutPage {
  // @ViewChildren("values") childList: QueryList<ElementRef>  如果这样后面处理的时候，可能会遇到类型错误，定义为any容错性比较高
  @ViewChildren("values")
  childList: any;

  @ViewChild("drag") drag: ElementRef;
  pc: number;
  arrs: any;
  subs = new Subscription();
  BAG = "HANDLES";
  public constructor(private dragulaService: DragulaService) {
    this.arrs = [
      {
        number: 1,
        content: "html + css + javascript"
      },
      {
        number: 2,
        content: "html5 + css3 +jquery"
      },
      {
        number: 3,
        content: "bootstrap / primeng + angular"
      },
      {
        number: 4,
        content: "ionic3 + cordova"
      }
    ];
  }
  ngOnInit(): void {
    this.dragulaService.createGroup("HANDLES", {
      direction: "vertical", //
      copy: false,
      copySortSource: false, // 拖动的时候复制一个新的，放开消失。
      revertOnSpill: true, // 如果拖到容器外面是否复位、还是就近排序。
      removeOnSpill: false, // 如果超出容器则从dom中删除
      mirrorContainer: document.getElementById("drag"), // 设置拖拽元素的容器
      ignoreInputTextSelection: true,
      moves: (el, container, handle) => {
        console.log(handle);
        // 规定拖动的元素。
        return handle.className === "handle";
      },
      isContainer: function (el) {
        return false; // only elements in drake.containers will be taken into account
      },
      accepts: function (el, target, source, sibling) {
        return true; // elements can be dropped in any of the `containers` by default
      },
      invalid: function (el, handle) {
        return false; // don't prevent any drags from initiating by default
      }
    });
    // window.addEventListener("touchmove", () => {
    this.subs.add(
      // 拖动
      this.dragulaService.drag(this.BAG).subscribe(({ el }) => {
        // this.addClass(el, "ex-moved");
        console.log(el);
      })
    );
    this.subs.add(
      // 放开
      this.dragulaService.drop(this.BAG).subscribe(({ el }) => {
        // this.addClass(el, "ex-moved");
      })
    );
    this.subs.add(
      // 经过
      this.dragulaService.over(this.BAG).subscribe(({ el, container }) => {
        console.log("over", container);
        // this.addClass(container, "ex-over");
      })
    );
    this.subs.add(
      // 拖出 el拖动的元素，container整个列表
      this.dragulaService.out(this.BAG).subscribe(({ el, container }) => {
        console.log("out", el, container);
        // let ss: any = container;
        // var arr = [];
        // // this.removeClass(container, "ex-over");
        // for (var i = 0; i < ss.children.length; i++) {
        //   arr.push(ss.children[i].children[0].innerText);
        // }
        // // 返回排序后的id数组
        // console.log(arr);

        this.pc = null;
      })
    );
  }
  // 销毁拖动事件
  ngOnDestroy() {
    this.subs.unsubscribe();
  }
  // 定义方法
  private hasClass(el: Element, name: string): any {
    return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(el.className);
  }
  private addClass(el: Element, name: string): void {
    if (!this.hasClass(el, name)) {
      el.className = el.className ? [el.className, name].join(" ") : name;
    }
  }
  private removeClass(el: Element, name: string): void {
    if (this.hasClass(el, name)) {
      el.className = el.className.replace(
        new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"),
        ""
      );
    }
  }

  presscFun(i) {
    this.pc = i;
  }
}

代码下载地址：https://github.com/zxc1989092...