案例一:
大致思路:该实现主要由onmousedown,onmousemove,onmouseup传统拖拽方式实现,兼容ie7+,主流浏览器
html代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h3>随着鼠标拖动而移动的小飞机</h3> <img id="p3" src="img/p3.png" alt="" /> <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.min.js" type="text/javascript" charset="utf-8"></script> <script> var base = new Base(); var p3 = base.getDom("p3"); base.moveBox(p3, p3); //该方法有2个参数,第一个参数为容器,第二个位要拖动的元素。 </script> </body> </html>
案例二:只能在红色边框内拖动的盒子
该案例只能在红色方框内拖动,
html代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h3>随着鼠标拖动而移动的小飞机</h3> <div id="wrap" style="width: 100px;height: 100px;border: 1px solid black;"> <div id="box" style="width: 100px;height: 20px;border: 1px solid red;"></div> </div> <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.min.js" type="text/javascript" charset="utf-8"></script> <script> var base = new Base(); var wrap = base.getDom("wrap"), box = base.getDom("box"); base.moveBox(wrap, box); </script> </body> </html>
js核心代码
该方法接收2个参数,第一个为外部容器,第二个参数为要拖动的元素;第一个参数与第二个参数相同时,拖动的为鼠标拖动的元素
moveBox: function(target, ele) { ele.onmousedown = function(event) { target.style.position = "absolute"; //前提是脱离文档流,后面才能设置偏移量 ele.style.cursor = "move"; var event = base.getEvent(event); var oX = event.clientX - target.offsetLeft, //鼠标点击的位置距离面板左边的距离 oY = event.clientY - target.offsetTop; document.onmousemove = function(event) { //因为这里是在document上移动的,所以需要在document上监听 var event = base.getEvent(event); base.preventDefault(event); //取消图片的默认拖动事件 var cX = event.clientX - oX, //移动后的坐标值 cY = event.clientY - oY; var maxW = base.getViewPort().pageWidth - target.offsetWidth, //盒子在视口右移的最大距离 maxH = base.getViewPort().pageHeight - target.offsetHeight; cX > maxW ? cX = maxW : cX; //right cY > maxH ? cY = maxH : cY; //bottom cY < 0 ? cY = 0 : cY; //top cX < 0 ? cX = 0 : cX; //left target.style.left = cX + "px"; target.style.top = cY + "px"; }; document.onmouseup = function() { document.onmousemove = null; //删除移动事件 document.onmouseup = null; //删除鼠标释放事件 } return false;//阻止火狐浏览器的默认打开URI } }