JS拖拽的封装函数

代码如下;

function drag(ele){//2.分析不确定的值 提成参数  拖拽的元素
    ele.onmousedown = function(event){
        //如果是ie低版本浏览器 就可以使用 setCapture
        if(ele.setCapture!=undefined){
            ele.setCapture();//设置全局捕获
        }
        var ev = event || window.event;
        //计算位置差
        var disX = ev.clientX - ele.offsetLeft;
        var disY = ev.clientY - ele.offsetTop;
        // 并 移动鼠标
        document.onmousemove = function(event){
            var ev = event || window.event;
            //div就会跟随鼠标进行移动  将div 定位到 鼠标位置
            //1.获取鼠标位置
            var x = ev.clientX - disX;
            var y = ev.clientY - disY;
            //控制范围:在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
            //上边界
            if(y<=0){
                y = 0;
            }
            //左边界
            if(x<=0){
                x = 0;
            }
            //下边界  窗口高 - 图片高
            if(y >= document.documentElement.clientHeight - ele.clientHeight){
                y = document.documentElement.clientHeight - ele.clientHeight;
            }
            //右边界   窗口宽 - 图片宽
            if(x >= document.documentElement.clientWidth - ele.clientWidth){
                x = document.documentElement.clientWidth - ele.clientWidth
            }
            //2.给div定位
            ele.style.left = x + 'px';
            ele.style.top = y + 'px';
        }
        return false;
    }
     // 一旦鼠标抬起 div就停止
     ele.onmouseup = function(){
         //解绑div 的 mousemove事件
         document.onmousemove = null;
         //如果在ie8以下 就释放全局捕获
         if(ele.releaseCapture!=undefined){
            ele.releaseCapture();
         }
     }
}

 

posted @ 2020-09-24 11:00  石海莹  阅读(230)  评论(0编辑  收藏  举报