javascript 可以拖動的DIV(二)
更新時間:2009年06月26日 13:00:07 作者:
關(guān)于這個實現(xiàn)div拖動的js函數(shù),實際上也是某位前輩公布于網(wǎng)上,這兒只是摘抄注解一下。
function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//這兒的deltaX/Y實際上就是得出鼠標(biāo)和div的坐標(biāo)差。
if(document.addEventListener)
//之所以在這兒加這樣一個判斷,是因為IE6和firefox對于javascript的事件處理有不同的方法(IE7之后的版本開始符合W3C的標(biāo)準(zhǔn))。
//document.addEventlistener如果是true的話,那就是firefox等支持W3C DOM標(biāo)準(zhǔn)的瀏覽器,IE6中注冊事件用attachEvent,而firefox等瀏覽器則是用addEventListener,語法如下所示。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)中使用的一個方法,用來取消事件的傳播。我們使用了document.addEventListener這個方法,瀏覽器會從document對象沿著DOM節(jié)點向下傳播到目標(biāo)節(jié)點,注冊的事件處理程序就會運(yùn)行,然后事件會回傳到父節(jié)點,如果父節(jié)點也有相應(yīng)的事件處理程序,那么事件也會處理,為了避免這種情況,我們可以用stopPropagation來阻止事件的傳播,這個方法的作用就是讓其他元素對這個事件不可見。在IE6下,并沒有元素捕捉事件的過程,不過有這個術(shù)語叫做起泡的過程,IE6中所用的方法就是cancelBubble,用來取消起泡,表示這個事件已被處理,其他元素不用再看見了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//這兒的preventDefault用來通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作,returnValue用來取消發(fā)生事件的源元素的默認(rèn)動作,大家應(yīng)該能看出這是在不同瀏覽器下發(fā)揮相同的作用。
//以下就是拖動div中所用的關(guān)鍵函數(shù)了。
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件對象,那么就用window.event
//全局屬性,否則就用DOM二級標(biāo)準(zhǔn)的Event對象。
//在IE中,event是window的一個屬性,也就是一個全局變量,但是在W3C DOM中,event是發(fā)生事件的文檔對象的屬性。在這個程序中,event是什么并不重要,關(guān)鍵是我們要取得鼠標(biāo)的坐標(biāo)值,在IE中,e這個參數(shù)傳進(jìn)來的時候,IE認(rèn)不出來,所以我們就給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);
}
//這個函數(shù)是用來移除偵聽器,比較簡單,就不詳細(xì)說了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
腳本之家 編輯注:如果不能正常運(yùn)行 注意字符的替換,因為好多網(wǎng)站為了安裝都將字符轉(zhuǎn)換成了中文下的標(biāo)點符號。本站也盡量的替換。
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//這兒的deltaX/Y實際上就是得出鼠標(biāo)和div的坐標(biāo)差。
if(document.addEventListener)
//之所以在這兒加這樣一個判斷,是因為IE6和firefox對于javascript的事件處理有不同的方法(IE7之后的版本開始符合W3C的標(biāo)準(zhǔn))。
//document.addEventlistener如果是true的話,那就是firefox等支持W3C DOM標(biāo)準(zhǔn)的瀏覽器,IE6中注冊事件用attachEvent,而firefox等瀏覽器則是用addEventListener,語法如下所示。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)中使用的一個方法,用來取消事件的傳播。我們使用了document.addEventListener這個方法,瀏覽器會從document對象沿著DOM節(jié)點向下傳播到目標(biāo)節(jié)點,注冊的事件處理程序就會運(yùn)行,然后事件會回傳到父節(jié)點,如果父節(jié)點也有相應(yīng)的事件處理程序,那么事件也會處理,為了避免這種情況,我們可以用stopPropagation來阻止事件的傳播,這個方法的作用就是讓其他元素對這個事件不可見。在IE6下,并沒有元素捕捉事件的過程,不過有這個術(shù)語叫做起泡的過程,IE6中所用的方法就是cancelBubble,用來取消起泡,表示這個事件已被處理,其他元素不用再看見了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//這兒的preventDefault用來通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作,returnValue用來取消發(fā)生事件的源元素的默認(rèn)動作,大家應(yīng)該能看出這是在不同瀏覽器下發(fā)揮相同的作用。
//以下就是拖動div中所用的關(guān)鍵函數(shù)了。
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件對象,那么就用window.event
//全局屬性,否則就用DOM二級標(biāo)準(zhǔn)的Event對象。
//在IE中,event是window的一個屬性,也就是一個全局變量,但是在W3C DOM中,event是發(fā)生事件的文檔對象的屬性。在這個程序中,event是什么并不重要,關(guān)鍵是我們要取得鼠標(biāo)的坐標(biāo)值,在IE中,e這個參數(shù)傳進(jìn)來的時候,IE認(rèn)不出來,所以我們就給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);
}
//這個函數(shù)是用來移除偵聽器,比較簡單,就不詳細(xì)說了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
腳本之家 編輯注:如果不能正常運(yùn)行 注意字符的替換,因為好多網(wǎng)站為了安裝都將字符轉(zhuǎn)換成了中文下的標(biāo)點符號。本站也盡量的替換。
您可能感興趣的文章:
- js 鼠標(biāo)拖動對象 可讓任何div實現(xiàn)拖動效果
- js實現(xiàn)可拖動DIV的方法
- javascript div 彈出可拖動窗口
- 利用javascript移動div層-javascript 拖動層
- js通過八個點 拖動改變div大小的實現(xiàn)方法
- js拖動div 當(dāng)鼠標(biāo)移動時整個div也相應(yīng)的移動
- Javascript實現(xiàn)的類似Google的Div拖動效果代碼
- JavaScript實現(xiàn)可拖拽的拖動層Div實例
- javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊
- js實現(xiàn)div色塊拖動錄制
相關(guān)文章
兩個JavaScript jsFiddle JSBin在線調(diào)試器
這兩個工具都是剛誕生不久,都還在不斷完善中,雖然目前jsFiddle要優(yōu)于JS Bin,但是我還是更看好后者2010-03-03JavaScript設(shè)計模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之模板方法模式原理與用法,結(jié)合實例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-08-08JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決
這篇文章主要為大家介紹了JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JavaScript中將字符串轉(zhuǎn)換為數(shù)字的七種方法總結(jié)
在js的使用中往往伴隨著有格式帶來的問題,下面這篇文章主要給大家介紹了關(guān)于JavaScript中將字符串轉(zhuǎn)換為數(shù)字的七種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09JavaScript高級程序設(shè)計 讀書筆記之十 本地對象Date日期
本地對象Date日期操作實現(xiàn)方法,需要的朋友可以參考下2012-02-02js 實現(xiàn)獲取name 相同的頁面元素并循環(huán)遍歷的方法
下面小編就為大家?guī)硪黄猨s 實現(xiàn)獲取name 相同的頁面元素并循環(huán)遍歷的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02