JS高級(jí)拖動(dòng)技術(shù) setCapture,releaseCapture
更新時(shí)間:2011年07月31日 23:39:32 作者:
setCapture 的意思就是設(shè)置一個(gè)對(duì)象的方法被觸發(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è)對(duì)象的方法被觸發(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)可提交的彈出層對(duì)話框效果
- javascript之可拖動(dòng)的iframe效果代碼
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- js通過(guò)八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果
- JavaScript簡(jiǎn)單實(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)文章
extjs簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了extjs簡(jiǎn)介,ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件,具有統(tǒng)一的主題,便于快速開發(fā),提高效率2017-07-07JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-10-10用js實(shí)現(xiàn)隨機(jī)返回?cái)?shù)組的一個(gè)元素
js實(shí)現(xiàn)隨機(jī)返回?cái)?shù)組的一個(gè)元素,這是個(gè)奇妙的方法。適合做標(biāo)題性質(zhì)文字的隨機(jī)輪換顯示2007-08-08使用濾鏡設(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