分类: H5/JS/CSS

Javascript元素拖曳操作 (兼容IE,Opera,Firefox)

[ 2007-04-16 11:56:30 | 作者: admin ]
字号: 大 | 中 | 小
http://blog.csdn.net/btbtd

说明: 拖曳流程鼠标按下->(鼠标移动->元素移动) 鼠标按键弹起->元素停止移动 针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent() 针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener Opera 以上两种方法都支持 在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute; 且应指定 left && top 的坐标值, 如: linenum element 1 dragging compatibility for IE, Opera, Firefox. 函数 fDragging(obj, e, limit) 的各参数解释: obj: HTML元素对象, 要拖曳的元素 e: 指定为 event 对象, 主要为兼容 Firefox limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置. 函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性 下使用, 如: linenum element dragging compatibility for IE, Opera, Firefox. shawl.

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

说明:
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动

针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()
针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener
Opera 以上两种方法都支持

在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute;
且应指定 left && top 的坐标值, 如:

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

函数 fDragging(obj, e, limit) 的各参数解释:
obj: HTML元素对象, 要拖曳的元素
e: 指定为 event 对象, 主要为兼容 Firefox
limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置.

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

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

函数: 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">
<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>

shawl.qiu
2006-11-10
http://blog.csdn.net/btbtd
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=855

这篇日志没有评论。

此日志不可发表评论。