/**
- 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)
}
}