限制范围的拖拽

来源：互联网发布：淘宝买飞机编辑：程序博客网时间：2024/06/10 15:22

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>限制范围的拖拽</title><style>#div1{width:100px;height:100px;background:red;position:absolute;}img{position: absolute;}</style><script type="text/javascript">window.onload = function(){var oDiv = document.getElementById("div1");var oImg = document.getElementById("img1");drag( oDiv);drag( oImg);function drag(obj){obj .onmousedown = function(ev){var ev = ev||event;var disX = ev.clientX-this.offsetLeft;var disY = ev.clientY-this.offsetTop;if(obj.setCapture){obj.setCapture();}document.onmousemove= function(ev){var ev = ev||event;var L = ev.clientX-disX;var T = ev.clientY-disY;if(L<0 ){L = 0;}else if(L>document.documentElement.clientWidth-obj.offsetWidth){L = document.documentElement.clientWidth-obj.offsetWidth;}if(T<0 ){T= 0;}else if(T>document.documentElement.clientHeight-obj.offsetHeight){T = document.documentElement.clientHeight-obj.offsetHeight;}//先判断并设置L和T的值，再设置left和top 值为有更好的用户体验效果。

obj.style.left = L +"px";obj.style.top= T +"px";}document.onmouseup = function(){document.onmousemove = null;if(obj.releaseCapture){obj.releaseCapture();}}return false;//取消事件的默认行为}}}</script></head><body>fdsgdfdsfsdf<div id="div1"></div><img id="img1" src="../img/cake2.jpg"></body></html>

阅读全文

0 0