JS高級拖動技術(shù) setCapture,releaseCapture
更新時間:2011年07月31日 23:39:32 作者:
setCapture 的意思就是設(shè)置一個對象的方法被觸發(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è)置一個對象的方法被觸發(fā)的范圍,或者作用域。
如果不設(shè)置,則div只在當(dāng)前窗口內(nèi)被觸發(fā)。如果設(shè)置,則在整個瀏覽器范圍內(nèi)被觸發(fā),也就是可以拖到瀏覽器外面
您可能感興趣的文章:
- js實現(xiàn)可拖動DIV的方法
- javascript 事件處理、鼠標(biāo)拖動效果實現(xiàn)方法詳解
- javascript div 彈出可拖動窗口
- html+javascript實現(xiàn)可拖動可提交的彈出層對話框效果
- javascript之可拖動的iframe效果代碼
- JS實現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實例
- js通過八個點 拖動改變div大小的實現(xiàn)方法
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
- JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能
- js 可拖動列表實現(xiàn)代碼
- Javascript實現(xiàn)的類似Google的Div拖動效果代碼
- 純js實現(xiàn)的積木(div層)拖動功能示例
相關(guān)文章
extjs簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了extjs簡介,ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件,具有統(tǒng)一的主題,便于快速開發(fā),提高效率2017-07-07JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-10-10使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。2011-04-04Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào)示例介紹
這篇文章主要介紹了Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào),需要的朋友可以參考下2014-05-05