控制图片拖动范围
我现在图片在整个浏览器进行拖动的，有什么办法可以控制图片拖动的范围。
最好是像个容器，图片只能在里面拖动。解决了，加分
[解决办法]
没思路 帮顶下吧
[解决办法]
<!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 style= " border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px; " onmousedown= "fDragging(this, event, true); ">
element <br/>
dragging compatibility for IE, Opera, Firefox.
</div>
<div style= " border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px; " onmousedown= "fDragging(this, event, true); ">
element 1 <br/>
dragging compatibility for IE, Opera, Firefox.
</div>
<div style= " border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px; " onmousedown= "fDragging(this, event, false); ">
element 2 <br/>
dragging compatibility for IE, Opera, Firefox. <br/>
<font color= "red "> dragging everywhere </font>
</div>
</div>
</body>
</html>
