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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java——教师类

    Java——教师类Description设计一个教师类Teacher,要求:属性有编号(intno)、姓名(Stringname)、年龄(intage)、所属学院(Stringseminary),为这些属性设置相应的get和set方法。为Teacher类重写equals方法,要求:当两个教师对象的no相同时返回true。重写Teacher类的toString方法,通过该方法可以返回“no:**…

    2022年7月8日
    14
  • python怎么安装pymysql_python pymysql安装「建议收藏」

    python怎么安装pymysql_python pymysql安装「建议收藏」==================mysql.connector===================最近发现mysql5.7有一个bug会引起pymysql报警,lib\site-packages\pymysql\cursors.py:170:Warning:(1265,”Datatruncatedforcolumn’使用mysql.connector可以避免该问题,安装pyth…

    2025年6月5日
    0
  • js 前进 后退 刷新

    js 前进 后退 刷新前进<inputtype=buttonvalue=前进οnclick=”window.history.go(1)”><inputtype=buttonvalue=前进οnclick=”window.history.forward()”>后退<inputtype=buttonvalue=后退οnclick=”window.history.go(-1)”><inputtype=buttonvalue=后退οnclick=”window

    2022年7月25日
    5
  • 怎么安装wget_Debian安装wget

    怎么安装wget_Debian安装wget第一步:执行wgetwww.baidu.com,若没有,会提示:-bash:wget:commandnotfound第二步:通过这个http://ftp.gnu.org/gnu/wget/下载wget的源代码wget-1.5.3.tar.gz第三步:通过命令行进入到下载后的文件夹,如:cdDownloads第四步:执行tar-zxvfwget-1.5.3.tar….

    2022年10月16日
    0
  • webpack打包优化_webpack打包及部署

    webpack打包优化_webpack打包及部署2019独角兽企业重金招聘Python工程师标准>>>…

    2022年10月21日
    0
  • 激活码pycharm_通用破解码

    激活码pycharm_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    32

发表回复

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

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