div拖动排序

#deductionOrderUl {
    list-style: none;
    margin: 0 auto;
    font-size: 0;
    text-decoration: none;
}
#deductionOrderUl li {
    font-size: 16px;
    width: ;
    height: ;
    text-align: center;
    line-height: 36px;
    border:   ;
    background: ;
    color: ;
    cursor: move;
    margin: 0 auto ;
}

<ul id="deductionOrderUl" ref="deductionOrderUl">
    <li v-for="data in areaPointData" draggable="true">{{data.area}}</li>
</ul>

部分内容来源自百度，侵删

// 展示拖动列表
deductionOrder() {
    this.$nextTick(function () {
        let that = this;
        let node = document.getElementById("deductionOrderUl");
        let dragging = null;
        //使用事件委托，将li的事件委托给ul
        node.ondragstart = function (event) {
            //firefox设置了setData后元素才能拖动！！！！
            //不能使用text，firefox会打开新tab
            event.dataTransfer.setData("te", event.target.innerText);
            dragging = event.target;
        }
        node.ondragover = function (event) {
            event.preventDefault();
            let target = event.target;
            //因为dragover会发生在ul上，所以要判断是不是li
            if (target.nodeName === "LI" && target !== dragging) {
                // 当前处于动画中则返回
                if (target && target.animated) {
                    return;
                }
                // 记录拖动前的位置
                let targetRect = target.getBoundingClientRect();
                let draggingRect = dragging.getBoundingClientRect();
                // getIndex是实现的获取index 向下移动
                if (that.getIndex(dragging) < that.getIndex(target)) {
                    target.parentNode.insertBefore(dragging, target.nextSibling);
                } else { // 向上移动
                    target.parentNode.insertBefore(dragging, target);
                }
                that.setAnimate(draggingRect, dragging);
                that.setAnimate(targetRect, target);
            }
        }
    })   
}
// 获取序号
getIndex(el) {
    let index = 0;
    if (!el || !el.parentNode) {
        return -1;
    }
    while (el && (el = el.previousElementSibling)) {
        index++;
    }
    return index;
},
// 给拖动元素设置动画
setAnimate(prevRect, target) {
    let ms = 300;
    let that = this;
    if (ms) {
        let currentRect = target.getBoundingClientRect();
        if (prevRect.nodeType === 1) {
            prevRect = prevRect.getBoundingClientRect();
        }
        that.setCss(target, 'transition', 'none');
        that.setCss(target, 'transform', 'translate3d(' +
            (prevRect.left - currentRect.left) + 'px,' +
            (prevRect.top - currentRect.top) + 'px, 0)' );
        target.offsetWidth; // 触发重绘
        that.setCss(target, 'transition', 'all ' + ms + 'ms');
        that.setCss(target, 'transform', 'translate3d(0,0,0)');

        clearTimeout(target.animated);
        target.animated = setTimeout(function() {
            that.setCss(target, 'transition', '');
            that.setCss(target, 'transform', '');
            target.animated = false;
        }, 300);
    }
},
// 设置css
setCss(el, prop, val) {
    let style = el && el.style;
    if (style) {
        if (val === void 0) {
            if (document.defaultView && document.defaultView.getComputedStyle) {
                val = document.defaultView.getComputedStyle(el, '');
            } else if (el.currentStyle) {
                val = el.currentStyle;
            }
            return prop === void 0 ? val : val[prop];
        } else {
            if (!(prop in style)) {
                prop = '-webkit-' + prop;
            }
            style[prop] = val + (typeof val === 'string' ? '' : 'px');
        }
    }
},

// 获取最终排序
getLastOrder() {
    let liList = this.$refs.deductionOrderUl.children;
    for(let i = liList.length - 1; i >= 0; i--) {
        list.push({
            label: liList[i].innerHTML,
            deductionOrder: liList.length - i
        });
    }
}