欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 可以拖動(dòng)的DIV(二)

 更新時(shí)間:2009年06月26日 13:00:07   作者:  
關(guān)于這個(gè)實(shí)現(xiàn)div拖動(dòng)的js函數(shù),實(shí)際上也是某位前輩公布于網(wǎng)上,這兒只是摘抄注解一下。
function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//這兒的deltaX/Y實(shí)際上就是得出鼠標(biāo)和div的坐標(biāo)差。
if(document.addEventListener)
//之所以在這兒加這樣一個(gè)判斷,是因?yàn)镮E6和firefox對(duì)于javascript的事件處理有不同的方法(IE7之后的版本開(kāi)始符合W3C的標(biāo)準(zhǔn))。
//document.addEventlistener如果是true的話,那就是firefox等支持W3C DOM標(biāo)準(zhǔn)的瀏覽器,IE6中注冊(cè)事件用attachEvent,而firefox等瀏覽器則是用addEventListener,語(yǔ)法如下所示。addEventListener函數(shù)的true參數(shù)表示可以捕捉事件。
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
//document.addEventListener("mouseout",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
//這兒的判斷依然是考慮了不同的瀏覽器,stopPropagation是W3C DOM標(biāo)準(zhǔn)中使用的一個(gè)方法,用來(lái)取消事件的傳播。我們使用了document.addEventListener這個(gè)方法,瀏覽器會(huì)從document對(duì)象沿著DOM節(jié)點(diǎn)向下傳播到目標(biāo)節(jié)點(diǎn),注冊(cè)的事件處理程序就會(huì)運(yùn)行,然后事件會(huì)回傳到父節(jié)點(diǎn),如果父節(jié)點(diǎn)也有相應(yīng)的事件處理程序,那么事件也會(huì)處理,為了避免這種情況,我們可以用stopPropagation來(lái)阻止事件的傳播,這個(gè)方法的作用就是讓其他元素對(duì)這個(gè)事件不可見(jiàn)。在IE6下,并沒(méi)有元素捕捉事件的過(guò)程,不過(guò)有這個(gè)術(shù)語(yǔ)叫做起泡的過(guò)程,IE6中所用的方法就是cancelBubble,用來(lái)取消起泡,表示這個(gè)事件已被處理,其他元素不用再看見(jiàn)了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//這兒的preventDefault用來(lái)通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作,returnValue用來(lái)取消發(fā)生事件的源元素的默認(rèn)動(dòng)作,大家應(yīng)該能看出這是在不同瀏覽器下發(fā)揮相同的作用。
//以下就是拖動(dòng)div中所用的關(guān)鍵函數(shù)了。
function moveHandler(e)
{
   if (!e) e=window.event; //如果是IE的事件對(duì)象,那么就用window.event
   //全局屬性,否則就用DOM二級(jí)標(biāo)準(zhǔn)的Event對(duì)象。
//在IE中,event是window的一個(gè)屬性,也就是一個(gè)全局變量,但是在W3C DOM中,event是發(fā)生事件的文檔對(duì)象的屬性。在這個(gè)程序中,event是什么并不重要,關(guān)鍵是我們要取得鼠標(biāo)的坐標(biāo)值,在IE中,e這個(gè)參數(shù)傳進(jìn)來(lái)的時(shí)候,IE認(rèn)不出來(lái),所以我們就給e賦值為window.event。
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
//這兒就是改變現(xiàn)在正在作用的div的left和top屬性。
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//這個(gè)函數(shù)是用來(lái)移除偵聽(tīng)器,比較簡(jiǎn)單,就不詳細(xì)說(shuō)了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
腳本之家 編輯注:如果不能正常運(yùn)行 注意字符的替換,因?yàn)楹枚嗑W(wǎng)站為了安裝都將字符轉(zhuǎn)換成了中文下的標(biāo)點(diǎn)符號(hào)。本站也盡量的替換。

相關(guān)文章

最新評(píng)論