JS高级拖动技术 setCapture,releaseCapture

JS高级拖动技术 setCapture,releaseCapture代码如下: window.onload=function(){ objDiv=document.getElementById(‘drag’); drag(objDiv); }; functiondrag(dv){ dv.onmousedown=function(e){ vard=document; e=e||window.event;

大家好,又见面了,我是你们的朋友全栈君。

代码如下:

<script type=”text/javascript”> 

<!– 

window.οnlοad=function(){ 

objDiv = document.getElementById(‘drag’); 

drag(objDiv); 

}; 

function drag(dv){ 

dv.οnmοusedοwn=function(e){ 

var d=document; 

e = e || window.event; 

var x= e.layerX || e.offsetX; 

var y= e.layerY || e.offsetY; 

//设置捕获范围 

if(dv.setCapture){ 

dv.setCapture(); 

}else if(window.captureEvents){ 

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 



d.οnmοusemοve=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.οnmοuseup=function(){ 

//取消捕获范围 

if(dv.releaseCapture){ 

dv.releaseCapture(); 

}else if(window.captureEvents){ 

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 



//清除事件 

d.οnmοusemοve=null; 

d.οnmοuseup=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 的意思就是设置一个对象的方法被触发的范围,或者作用域。 


如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134920.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ant安装过程

    ant安装过程ant是jakarta一个非常好的OpenSource子项目,是基于java的编译工具。下面简单介绍一下在linux环境中如何安装ant:1.下载  从 http://ant.apache.org/bindownload.cgi 可以下载最新的tar包:apache-ant-1.8.1-bin.tar.gz 2.安装,直接解压到当前下载目录即可>tarzxpvfapach

    2022年7月18日
    23
  • java的英文文献综述_java英文参考文献.doc[通俗易懂]

    java的英文文献综述_java英文参考文献.doc[通俗易懂]java英文参考文献环境风水学论文参考文献(一)摘要:中国传统人居环境文化,俗称风水,是中国人居环境的艺术。中国传统人居环境文化历经千年而不衰,归功于其坚实的理论基础和强大的现实适用性。风水作为一种东方文化特有的思维方式,不仅体现在中国城市、庙宇、乡村、道路、住宅的选址和规划布局中,而且渗透、积淀为中国人心理层面上的审美文化取向,成为中国人的基因。丁文剑《现代建筑与古代风水》上海东华大学出版社…

    2022年9月30日
    4
  • 五大主流浏览器及四大内核1

    五大主流浏览器及四大内核1

    2021年10月23日
    44
  • Python之numpy库

    NumPy库知识结构

    2021年12月19日
    41
  • char型和int型数据可以相互转换_c语言强制类型转换用法

    char型和int型数据可以相互转换_c语言强制类型转换用法char转intchar与int的相互转化,联想ASCII码,字符‘0’对应的值为48,所以不能直接加减‘’charch=’9′;intch_int=ch-‘0′;//此时ch_int=9int转charinti=9;chari_ch=i+’0’;//此时i_ch=’9’必须记住的几个ASCII值字符值ASCII值‘0’48…

    2022年10月2日
    5
  • python–xlsx文件的读写[通俗易懂]

    python–xlsx文件的读写[通俗易懂]文章目录xlsx文件的写入新建工作簿和新建工作表为工作表添加内容xlsx文件的读取最近碰到一个问题,需要读取后缀为xlsx的文件,因此在此总结一下python对于xlsx文件的读写。一般如果是后缀xls的话,用xlwt和xlrd进行读写;而后缀是xlsx的话,用openpyxl进行读写。在此主要介绍openpyxl库对xlsx的读写。参考链接:python之openpyxl模块xlsx文…

    2022年5月30日
    75

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号