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