vue实现拖动div元素

Posted 2020-10-16 huahua_0825

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;
                    }
                }
            }
        }
    })