JS拖動技術(shù) 關(guān)于setCapture使用
更新時間：2010年12月09日 18:34:35 作者：
JS拖動技術(shù) 關(guān)于setCapture使用，學習js拖動效果的朋友可以參考下。
JS拖動技術(shù)--- 關(guān)于setCapture (轉(zhuǎn)自 劍膽琴心-.Net學習筆記)
<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>
復制代碼 代碼如下:
<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)文章
使用weixin-java-miniapp配置進行單個小程序的配置詳解
這篇文章主要介紹了使用weixin-java-miniapp配置進行單個小程序的配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
JS實現(xiàn)pasteHTML兼容ie,firefox,chrome的方法
這篇文章主要介紹了JS實現(xiàn)pasteHTML兼容ie,firefox,chrome的方法,涉及javascript針對頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要針對js運動應用進行實例解析2015-12-12
本篇文章主要介紹了webpack引入eslint配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
javascript運動效果實例總結(jié)(放大縮小、滑動淡入、滾動)
這篇文章主要介紹了javascript運動效果,結(jié)合實例形式總結(jié)分析JavaScript實現(xiàn)放大縮小、滑動淡入、滾動等效果的方法,需要的朋友可以參考下2016-01-01
JS中通過url動態(tài)獲取圖片大小的方法小結(jié)(兩種方法)
這篇文章主要介紹了JS中通過url動態(tài)獲取圖片大小的方法小結(jié)，本文給大家列舉了兩種方法，大家可以嘗試下看哪種方法好用，感興趣的朋友跟隨小編一起看看吧2018-10-10
剛才一個朋友告訴我他的blog友情鏈接太多了，所以把所有鏈接放到一個DIV中，加了個滾動條，可是他又不想每次別人來看，看到的都是前面幾個鏈接，于是問我有沒有什么辦法，想了一個，呵呵，正好有個辦法2008-11-11
javascript下對于事件、事件流、事件觸發(fā)的順序隨便說說
向同一個標簽 動態(tài)的添加事件是 執(zhí)行的順序在ie和其他非ie內(nèi)核的瀏覽器有所不同 ie是“先進先出 ” 就是最先添加的最先執(zhí)行，其他非ie內(nèi)核的瀏覽器是 “先進后出”，就是 最后添加的事件 先執(zhí)行。2010-07-07
本文給大家總結(jié)了12個javascript常用的基本功能，十分的實用，這里推薦給大家,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js實現(xiàn)的頁面矩陣圖形變換特效,涉及JavaScript利用數(shù)組與字符串的數(shù)學運算操作頁面節(jié)點樣式變換的相關(guān)技巧,需要的朋友可以參考下2016-01-01