vue js实现拖拽

新建一个drag.js,如下

function drag(dom){
    var _init_left, _init_top, _div_top=0, _div_left=0, _box_width, _box_heiht,x=0,y=0;
    dom.addEventListener('touchstart', function (e) {
        _init_left = parseInt(e.touches[0].clientX);
        _init_top = parseInt(e.touches[0].clientY);
        _box_width =dom.style.width;
        _box_heiht =dom.style.height;
    }, false);
    
    dom.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var _left = parseInt(e.touches[0].clientX);
        var _top = parseInt(e.touches[0].clientY);
        x = _left - _init_left;
        y = _top - _init_top;
        dom.style.top = _div_top + y + 'px';
        dom.style.left = _div_left + x + 'px';
    });

    dom.addEventListener('touchend', function(e) {
        _div_left += x;
        _div_top += y
        x=y=0
        dom.removeEventListener('touchmove',()=>{},false);
    });
    // PC
    var posX;
    var posY;

    dom.onmousedown = function(e) {
        posX = e.x - dom.offsetLeft; //获得横坐标x
        posY = e.y - dom.offsetTop; //获得纵坐标y
        document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用
    }
    document.onmouseup = function() {
        document.onmousemove = null; //鼠标举起，停止
    }

    function mousemove(ev) {
        if (ev == null) ev = window.event; //IE
        dom.style.left = (ev.clientX - posX) + "px";
        dom.style.top = (ev.clientY - posY) + "px";
    }

}
export default drag;

然后

<div :class="{ 'search-pop-warp': true }"   ref="ssss"> </div>

 

再然后

   import drag from "../common/drag"; 
　　mounted() {
      
        this.$nextTick(() => {
            drag(this.$refs.ssss);
        });
    },

完美完成，没问题点个赞吧。