/**

• 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、火狐要求被拖動元素必須包含數(shù)據(jù)，所以你需要給他加上數(shù)據(jù)，
  

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

•        3、ff拖動時會把攜帶的數(shù)據(jù)自動在新的頁面打開，需做處理 
  

*/
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 數(shù)據(jù)請求路徑

• @param {*} requireData 請求數(shù)據(jù)
  */
  function setNewList (url,requireData) {
  axios.post(url,requireData).then(function(response){
  //console.log(response, "拖拽返回數(shù)據(jù)")
  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 列表數(shù)據(jù)Array
  • @param {*} dragIndex 拖拽數(shù)據(jù)位置
    */
    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 列表數(shù)據(jù)Array
  • @param {*} dropIndex 釋放數(shù)據(jù)位置
  • @param {*} url 請求數(shù)據(jù)路徑
    */
    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")
    // 清空數(shù)據(jù)
    origin_list = [];
    drag_index = null;
    drop_index = null;
    currentItem = null;
    setNewList(url, requireData)

  }
  }