拖拽功能的实现

1.安装依赖

cnpm install vuedraggable

2.引入依赖

import vuedraggable from 'vuedraggable'

3.注册

 components: {

    vuedraggable

  },

<div class="part" v-for="(value, index) in dataList" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" @click="clickPart(value,index)" v-bind:key="index" draggable="true" @dragstart="drag(value,index)" @drop="drop(value)" @dragover="allowDrop($event)"><div>

     //拖拽
    drag (item, index) {
      this.resources = []
      if (this.global.currentSelected.length > 1) {
        this.global.currentSelected.forEach(file => {
          this.resources.push(file.filePath)
        })
      }
      else {
        this.resources.push(item.filePath)
      }
      this.global.currentSelected = [];
      this.dataList.forEach(file => file.isSelect = false);
      if (!item.isSelect) {
        this._onSelectAdd(index)
      }
    },
    // 允许放下拖拽
    allowDrop (ev) {
      ev.preventDefault();
    },
    // 放下事件
    drop (item) {
      this.target = item.filePath
      this.handleDrag()

    },

//连接后台接口，参数为放下的文件和拖拽的文件
handleDrag () {
      let that = this;
      let params = {
        "target": this.target  //放下的文件
        "resources": this.resources  //拖拽的文件
      }
      console.log("params", params)
      HTTP.post(this.$urls.file.move, params).then(function (response) {

        var resultData = response.data;
        console.log("resultData", resultData)
        if (resultData) {
          that.$message.success("成功")
          that.$emit("queryHandler");//局部刷新
        }
      }).catch(err => {

        console.log(err);
      });
    },