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

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

  • 相关阅读:
    联想yoga pro 13 使用Hyper-v蓝屏错误PAGE_FAULT_IN_NONPAGED-AREA的解决办法
    部署 Halo 博客系统
    GiuHub高级搜索关键字
    layer提示框弹出异常抖动,而且不显示
    bootstrap同一页面上多个模态框
    border-radius
    git查看本机ssh公钥
    简单的git连接远程仓库小记
    hexo搭建完成后输入hexo s 没有生成Html静态文件
    application/xml and text/xml的区别
  • 原文地址:https://www.cnblogs.com/zhenchaojia123/p/14251150.html
Copyright © 2020-2023  润新知