您的位置：首页 > Web前端 > JavaScript

js拖曳页面内元素

2011-12-16 17:33 190 查看

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


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

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

标签：

相关文章推荐

新的分享

章节导航