/ * *

  • created by shangxiaoyang 2017/11/10
  • Drag js (this scheme is suitable for VUE + AXIOS engineering project)
  • For: Chrome FF IE9 + other browsers
  • Usage:
  • 1. 
    draggable='true' @dragstart="dragStart($event, index)" @drop="drop($event, index)" @dragover='allowDrop($event)'Copy the code

    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();
     },Copy the code

    3,

             document.body.ondrop = function (e) {
                 e.preventDefault();
                 e.stopPropagation();
         }Copy the code
  • Compatibility handling: 1. In other browsers you just need to add draggable=true to the HTML element
  • Firefox requires drag elements to contain data, so you need to add data to them,
  • Methods XXX. Ondragstart = function (event) {event. DataTransfer. SetData (” text “, “www.shangxiaoyang.com”); }
  • 3, ff drag carry it during the data automatically open the new page, is needed to deal with the event. The 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 data request path * @param {*} requireData Request data */function setNewList (url,requireData) {
    axios.post(url,requireData).then(function(response){
            //console.log(response, "Drag and drop return data")
            requireData = {};
            if(response.data.code === 1){
                 Message({showClose: true, message: 'Update successful'.type: 'success'});
            }else{
                 Message({showClose: true, message: 'Update failed'.type: 'warning'});

               //setNewList(require_url, requireData);
            }
        }.bind(this)).catch((err) =>{
            console.log(err)
    })
}
exportDefault {/** ** @param {*} dataList list data 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 list data Array * @param {*} dropIndex Release data location * @param {*} URL request data path */ 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)

    }
}Copy the code