快捷導(dǎo)航

JS高級(jí)拖動(dòng)技術(shù) setCapture，releaseCapture

更新時(shí)間：2011年07月31日 23:39:32 作者：

setCapture 的意思就是設(shè)置一個(gè)對(duì)象的方法被觸發(fā)的范圍，或者作用域。

 
<script type="text/javascript"> 
<!-- 
window.onload=function(){ 
objDiv = document.getElementById('drag'); 
drag(objDiv); 
}; 
function drag(dv){ 
dv.onmousedown=function(e){ 
var d=document; 
e = e || window.event; 
var x= e.layerX || e.offsetX; 
var y= e.layerY || e.offsetY; 
//設(shè)置捕獲范圍 
if(dv.setCapture){ 
dv.setCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 
} 
d.onmousemove=function(e){ 
e= e || window.event; 
if(!e.pageX)e.pageX=e.clientX; 
if(!e.pageY)e.pageY=e.clientY; 
var tx=e.pageX-x; 
var ty=e.pageY-y; 
dv.style.left=tx; 
dv.style.top=ty; 
}; 
d.onmouseup=function(){ 
//取消捕獲范圍 
if(dv.releaseCapture){ 
dv.releaseCapture(); 
}else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
//清除事件 
d.onmousemove=null; 
d.onmouseup=null; 
}; 
}; 
} 
//--> 
</script> 
<div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div> 

setCapture 的意思就是設(shè)置一個(gè)對(duì)象的方法被觸發(fā)的范圍，或者作用域。
如果不設(shè)置，則div只在當(dāng)前窗口內(nèi)被觸發(fā)。如果設(shè)置，則在整個(gè)瀏覽器范圍內(nèi)被觸發(fā)，也就是可以拖到瀏覽器外面

您可能感興趣的文章:

相關(guān)文章

JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
原生JavaScript實(shí)現(xiàn)連連看游戲(附源碼)
原生JavaScript版連連看游戲，有源碼，適合初學(xué)者學(xué)習(xí)，喜歡的朋友可以研究下
2013-11-11
JavaScript使用pop方法移除數(shù)組最后一個(gè)元素用法實(shí)例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個(gè)元素,實(shí)例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下
2015-04-04
微信小程序開(kāi)發(fā)中的視頻播放和直播功能示例代碼
近期為一家企業(yè)開(kāi)發(fā)小程序,用戶提出了在小程序中增加直播功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)中視頻播放和直播功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
javascript刪除Table中的一行的腳本代碼
用js實(shí)現(xiàn)的刪除table中一行數(shù)據(jù)的代碼
2008-06-06
JS轉(zhuǎn)換HTML轉(zhuǎn)義符的方法
下面小編就為大家?guī)?lái)一篇JS轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換...
2007-07-07
JavaScript前端超時(shí)異步操作完美解決過(guò)程
這篇文章主要為大家介紹了JavaScript前端超時(shí)異步操作的完美解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-11-11
JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了JS密碼生成與強(qiáng)度檢測(cè)完整實(shí)例,涉及JavaScript密碼的生成,破解時(shí)間計(jì)算,密碼安全監(jiān)測(cè)及大小寫(xiě)鎖定判斷等功能的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
JavaScript中DOM和BOM原理詳析
這篇文章主要介紹了JavaScript中DOM和BOM原理詳析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09