html：

<div id="app1">
     <div v-drag class="drag"></div>
     <div v-drag class="drag"></div>
</div>

css:

.drag{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: red
 
;
}

js：

    // 拖動div元素
    let vm1 = new Vue({
        el:‘#app1‘,
        // 自定義指令
        directives:{
            drag(el,bindings){
                el.onmousedown = function(e){
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    document.onmousemove 
 
= function (e){
                        el.style.left = e.pageX - disx+‘px‘;
                        el.style.top = e.pageY - disx+‘px‘;
                    }
                    document.onmouseup = function(){
                        document.onmousemove = document.onmouseup = null;
                    }
                }
            }
        }
    })
 

vue實現拖動div元素