控制图片拖动范围,该如何处理
日期：2014-05-18 浏览次数：20417 次
控制图片拖动范围
我现在图片在整个浏览器进行拖动的，有什么办法可以控制图片拖动的范围。
最好是像个容器，图片只能在里面拖动。解决了，加分
------解决方案--------------------
没思路 帮顶下吧
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<!-- DW6 -->
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> shawl.qiu template </title>
<script type= "text/javascript ">
// <![CDATA[
function fDragging(obj, e, limit){
if(!e) e=window.event;
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
var x_=e.clientX-x;
var y_=e.clientY-y;
if(document.addEventListener){
document.addEventListener( 'mousemove ', inFmove, true);
document.addEventListener( 'mouseup ', inFup, true);
} else if(document.attachEvent){
document.attachEvent( 'onmousemove ', inFmove);
document.attachEvent( 'onmouseup ', inFup);
}
inFstop(e);
inFabort(e)
function inFmove(e){
var evt;
if(!e)e=window.event;
if(limit){
var op=obj.parentNode;
var opX=parseInt(op.style.left);
var opY=parseInt(op.style.top);
if((e.clientX-x_) <0) return false;
else if((e.clientX-x_+obj.offsetWidth+opX)> (opX+op.offsetWidth)) return false;
if(e.clientY-y_ <0) return false;
else if((e.clientY-y_+obj.offsetHeight+opY)> (opY+op.offsetHeight)) return false;
//status=e.clientY-y_;
}
obj.style.left=e.clientX-x_+ 'px ';
obj.style.top=e.clientY-y_+ 'px ';
inFstop(e);
} // shawl.qiu script
function inFup(e){
var evt;
if(!e)e=window.event;
if(document.removeEventListener){
document.removeEventListener( 'mousemove ', inFmove, true);
document.removeEventListener( 'mouseup ', inFup, true);
} else if(document.detachEvent){
document.detachEvent( 'onmousemove ', inFmove);
document.detachEvent( 'onmouseup ', inFup);
}
inFstop(e);
} // shawl.qiu script
function inFstop(e){
if(e.stopPropagation) return e.stopPropagation();
else return e.cancelBubble=true;
} // shawl.qiu script
function inFabort(e){
if(e.preventDefault) return e.preventDefault();
else return e.returnValue=false;
} // shawl.qiu script
}
//]]>
</script>
</head>
<body>
<div style= " border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px; "> this parent
<div
我现在图片在整个浏览器进行拖动的，有什么办法可以控制图片拖动的范围。
最好是像个容器，图片只能在里面拖动。解决了，加分
------解决方案--------------------
没思路 帮顶下吧
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<!-- DW6 -->
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> shawl.qiu template </title>
<script type= "text/javascript ">
// <![CDATA[
function fDragging(obj, e, limit){
if(!e) e=window.event;
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
var x_=e.clientX-x;
var y_=e.clientY-y;
if(document.addEventListener){
document.addEventListener( 'mousemove ', inFmove, true);
document.addEventListener( 'mouseup ', inFup, true);
} else if(document.attachEvent){
document.attachEvent( 'onmousemove ', inFmove);
document.attachEvent( 'onmouseup ', inFup);
}
inFstop(e);
inFabort(e)
function inFmove(e){
var evt;
if(!e)e=window.event;
if(limit){
var op=obj.parentNode;
var opX=parseInt(op.style.left);
var opY=parseInt(op.style.top);
if((e.clientX-x_) <0) return false;
else if((e.clientX-x_+obj.offsetWidth+opX)> (opX+op.offsetWidth)) return false;
if(e.clientY-y_ <0) return false;
else if((e.clientY-y_+obj.offsetHeight+opY)> (opY+op.offsetHeight)) return false;
//status=e.clientY-y_;
}
obj.style.left=e.clientX-x_+ 'px ';
obj.style.top=e.clientY-y_+ 'px ';
inFstop(e);
} // shawl.qiu script
function inFup(e){
var evt;
if(!e)e=window.event;
if(document.removeEventListener){
document.removeEventListener( 'mousemove ', inFmove, true);
document.removeEventListener( 'mouseup ', inFup, true);
} else if(document.detachEvent){
document.detachEvent( 'onmousemove ', inFmove);
document.detachEvent( 'onmouseup ', inFup);
}
inFstop(e);
} // shawl.qiu script
function inFstop(e){
if(e.stopPropagation) return e.stopPropagation();
else return e.cancelBubble=true;
} // shawl.qiu script
function inFabort(e){
if(e.preventDefault) return e.preventDefault();
else return e.returnValue=false;
} // shawl.qiu script
}
//]]>
</script>
</head>
<body>
<div style= " border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px; "> this parent
<div
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
