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只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

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