列表拖拽js（本方案适用于vue + axios 工程化项目）

/**

• created by shangxiaoyang 2017/11/10
• 拖拽js（本方案适用于vue + axios 工程化项目）
• 适用: chrome ff ie9+ 其他浏览器
• 使用方式：1、draggable='true' @dragstart="dragStart($event, index)" @drop="drop($event, index)" @dragover='allowDrop($event)' //

•      2、dragStart (event, index) {
               event.dataTransfer.setData("text","www.baidu.com"); 
               api.dragItem(this.fieldLists, index)
           },
           drop (event, index) {
               api.dropItem(this.fieldLists, index, this.basicUrl+`/workflow/formItemField/sort`)        
           },
           allowDrop (event){
               event.preventDefault();
           },
       3、 
       document.body.ondrop = function (e) {
               e.preventDefault();
               e.stopPropagation();
       }
  

• 兼容性处理：1、其它浏览器你只需要在html元素上加上draggable=true即可

•        2、火狐要求被拖动元素必须包含数据，所以你需要给他加上数据，
  

•           方法 xx.ondragstart=function(e){ e.dataTransfer.setData("text","www.baidu.com"); }
  

•        3、ff拖动时会把携带的数据自动在新的页面打开，需做处理 
  

*/
import axios from 'axios'
import {Message} from 'element-ui'

let result_list = [];
let origin_list = [];
let middle_list = [];
let requireData = {};
let currentItem = null;
let drag_index = null;
let drop_index = null;
let require_url = '' ;
/**

• @param {*} url 数据请求路径

• @param {*} requireData 请求数据
  */
  function setNewList (url,requireData) {
  axios.post(url,requireData).then(function(response){
  //console.log(response, "拖拽返回数据")
  requireData = {};
  if(response.data.code === 1){
  Message({showClose: true, message: '更新成功',type: 'success'});
  }else{
  Message({showClose: true, message: '更新失败',type: 'warning'});

          //setNewList(require_url, requireData);
       }
   }.bind(this)).catch((err) =>{
       console.log(err)
  

  })
  }
  export default{
  /**

  • @param {*} dataList 列表数据Array
  • @param {*} dragIndex 拖拽数据位置
    */
    dragItem (dataList, dragIndex) {
    //console.log(dataList)
    //console.log(dataList[dragIndex])
    origin_list = dataList
    drag_index = dragIndex
    //currentItem = dataList.splice(dragIndex,1)
    currentItem = dataList[dragIndex]

  },

  /**

  • @param {*} dataList 列表数据Array
  • @param {*} dropIndex 释放数据位置
  • @param {*} url 请求数据路径
    */
    dropItem (dataList, dropIndex, url) {
    require_url = url;
    //console.log(dataList[dropIndex],dropIndex);
    origin_list.splice(drag_index, 1);
    origin_list.splice(dropIndex, 0, currentItem);
    //console.log(origin_list);
    requireData = {};
    origin_list.forEach((item, index) => {
    requireData[item.id] = index
    })
    console.log(requireData,"requireData")
    // 清空数据
    origin_list = [];
    drag_index = null;
    drop_index = null;
    currentItem = null;
    setNewList(url, requireData)

  }
  }