列表拖拽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.shangxiaoyang.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、火狐要求被拖动元素必须包含数据，所以你需要给他加上数据，
• 方法 xxx.ondragstart=function(event){ event.dataTransfer.setData("text","www.shangxiaoyang.com"); }
• 3、ff拖动时会把携带的数据自动在新的页面打开，需做处理event.dataTransfer.setData("text","www.shangxiaoyang.com");

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)

    }
}