|
二、 IE中拖動DOM元素的例子
/*
該函數(shù)由mousedown事件處理調(diào)用
它為隨后發(fā)生的mousemove和mouseup事件注冊了臨時的捕捉事件處理程序
并用這些事件處理程序拖動指定的文檔元素
第二個參數(shù)必須是mousedown事件的事件對象
*/
function beginDrag(elementToDrag,event)
{
//該元素當前位于何處
//該元素的樣式性質(zhì)必須具有l(wèi)eft和top CSS屬性
//此外，我們假定他們用象素做單位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//計算一個點和鼠標點擊之間的距離，下面的嵌套的moveHandler函數(shù)需要這些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注冊mousedown事件后發(fā)生的mousemove和mouseup事件的處理程序
// 注意，它們被注冊為文檔的捕捉事件處理程序
// 在鼠標按鈕保持按下的狀態(tài)的時候，這些事件處理程序保持活動的狀態(tài)
// 在按鈕被釋放的時候，它們被刪除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我們已經(jīng)處理了該事件，不要讓別的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
這是在元素被拖動時候捕捉mousemove事件的處理程序，它響應(yīng)移動的元素
*/
function moveHandler(e)
{
//把元素移動到當前的鼠標位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要讓別的元素看到該事件
event.cancelBubble=true;
}
/*
該事件將捕捉拖動結(jié)束的時候發(fā)生的mouseup事件
*/
function upHandler(e)
{
//注銷事件處理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
調(diào)用它的HTML文件代碼：
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="dragIE.js"></script>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
<div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" >
拖動我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
出處：藍色理想
責(zé)任編輯：moby
上一頁 IE Event對象 下一頁 DOM中的高級事件處理
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 IE中拖動DOM元素的例子
