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