Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

王朝html/css/js·作者佚名 2006-11-16

宽屏版字体: 小|中|大|超大

说明:

拖曳流程

鼠标按下->(鼠标移动->元素移动)

鼠标按键弹起->元素停止移动

针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()

针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener

Opera 以上两种方法都支持

在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute;

且应指定 left && top 的坐标值, 如:

linenum

element 1<br/>

dragging compatibility for IE, Opera, Firefox.

</div>

函数 fDragging(obj, e, limit) 的各参数解释:

obj: HTML元素对象, 要拖曳的元素

e: 指定为 event 对象, 主要为兼容 Firefox

limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置.

函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性下使用, 如:

linenum

element <br/>

dragging compatibility for IE, Opera, Firefox.

</div>

shawl.qiu

2006-11-10

http://blog.csdn.net/btbtd

函数: fDragging(obj, e, limit) 及使用演示

linenum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>shawl.qiu template</title>

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

element <br/>

dragging compatibility for IE, Opera, Firefox.

</div>

element 1<br/>

dragging compatibility for IE, Opera, Firefox.

</div>

element 2<br/>

dragging compatibility for IE, Opera, Firefox. <br/>

<font color="red">dragging everywhere</font>

</div>

</body>

</html>