JS拖動技術(shù) 關(guān)于setCapture使用
更新時間：2010年12月09日 18:34:35 作者：
JS拖動技術(shù) 關(guān)于setCapture使用，學(xué)習(xí)js拖動效果的朋友可以參考下。
JS拖動技術(shù)--- 關(guān)于setCapture (轉(zhuǎn)自 劍膽琴心-.Net學(xué)習(xí)筆記)
<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>
復(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>
相關(guān)文章
ES6中引入了一些新的數(shù)組方法,例如:Array.of(),Array.from()等,下面這篇文章主要給大家介紹了關(guān)于es6處理數(shù)組的方法匯總,需要的朋友可以參考下2023-06-06
這篇文章給大家介紹了js實(shí)現(xiàn)百度搜索功能，代碼分為html部分和css折疊樣式部分，具體實(shí)現(xiàn)代碼大家參考下本文2018-02-02
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)封裝(簡單高效)，微信小程序的網(wǎng)絡(luò)請求很便捷，直接調(diào)用就可以了。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
純javaScript、jQuery實(shí)現(xiàn)個性化圖片輪播【推薦】
本文主要介紹了純javaScript、jQuery實(shí)現(xiàn)個性化圖片輪播的方法，并在文章結(jié)尾附上源碼下載。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
js parseInt("08")未指定進(jìn)位制問題
今天在做JS關(guān)于月份的判斷，對于parseInt("01")到parseInt("07");都能得到正確的結(jié)果，但如果是parseInt("08")或parseInt("09")則返回0，首先看parseInt語法：parseInt(string, radix);2010-06-06
數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關(guān)于js求數(shù)組最大值的常用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
javascript+dom樹型菜單類，希望朋友們一起進(jìn)步
javascript+dom樹型菜單類，希望朋友們一起進(jìn)步...2007-05-05
JavaScript ES6中const、let與var的對比詳解
這篇文章主要給大家介紹了在JavaScript中const、let與var對比的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-06-06
javascript實(shí)現(xiàn)的網(wǎng)站訪問量統(tǒng)計代碼
本文文章通過兩段代碼實(shí)例給大家介紹了基于javascript實(shí)現(xiàn)網(wǎng)站訪問量統(tǒng)計代碼，對js實(shí)現(xiàn)網(wǎng)站訪問量統(tǒng)計相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家詳細(xì)介紹了小程序自定義tabBar組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11