JS高級拖動(dòng)技術(shù) setCapture，releaseCapture
更新時(shí)間：2011年07月31日 23:39:32 作者：
setCapture 的意思就是設(shè)置一個(gè)對象的方法被觸發(fā)的范圍，或者作用域。
復(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è)對象的方法被觸發(fā)的范圍，或者作用域。
如果不設(shè)置，則div只在當(dāng)前窗口內(nèi)被觸發(fā)。如果設(shè)置，則在整個(gè)瀏覽器范圍內(nèi)被觸發(fā)，也就是可以拖到瀏覽器外面
您可能感興趣的文章:
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- javascript div 彈出可拖動(dòng)窗口
- html+javascript實(shí)現(xiàn)可拖動(dòng)可提交的彈出層對話框效果
- javascript之可拖動(dòng)的iframe效果代碼
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- js通過八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果
- JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
- js 可拖動(dòng)列表實(shí)現(xiàn)代碼
- Javascript實(shí)現(xiàn)的類似Google的Div拖動(dòng)效果代碼
- 純js實(shí)現(xiàn)的積木(div層)拖動(dòng)功能示例
相關(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
近期為一家企業(yè)開發(fā)小程序,用戶提出了在小程序中增加直播功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)中視頻播放和直播功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
用js實(shí)現(xiàn)的刪除table中一行數(shù)據(jù)的代碼2008-06-06
下面小編就為大家?guī)硪黄狫S轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換...2007-07-07
這篇文章主要為大家介紹了JavaScript前端超時(shí)異步操作的完美解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
JS密碼生成與強(qiáng)度檢測完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了JS密碼生成與強(qiáng)度檢測完整實(shí)例,涉及JavaScript密碼的生成,破解時(shí)間計(jì)算,密碼安全監(jiān)測及大小寫鎖定判斷等功能的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JavaScript中DOM和BOM原理詳析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09