您的位置：首页 > 其它

限制范围的拖拽

2017-05-26 15:02 127 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 拖拽限制范围事件

相关文章推荐

新的分享

章节导航