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)


相关推荐

  • 爬虫遇到js动态渲染问题

    爬虫遇到js动态渲染问题爬虫遇到js动态渲染问题时间:2020年6月3日10:28:48作者:钟健概要:关于scrapy爬虫应对网页JavaScript动态渲染问题关键字:scrapycrapy-splash一、传统爬虫的问题scrapy爬虫与传统爬虫一样,都是通过访问服务器端的网页,获取网页内容,最终都是通过对于网页内容的分析来获取数据,这样的弊端就在于他更适用于静态网页的爬取,而面对js渲染的动态网页就有点力不从心了,因为通过js渲染出来的动态网页的内容与网页文件内容是不一样的。1.实际案例腾讯招聘:ht

  • make menuconfig makefile kconfig详解

    make menuconfig makefile kconfig详解前面有一片文章分析makemenuconfig执行过程:http://blog.csdn.net/xinyuan510214/article/details/50964808今天,将一下makemenuconfigmakefilekconfig等几个容易混淆的关键操作。===1、内核Makefile概述(linux2.6)Linux内核的Makefile分为5个部分

  • 异或和与运算_逻辑异或运算规则

    异或和与运算_逻辑异或运算规则异或,是一个数学运算符,英文为exclusiveOR,缩写为xor,应用于逻辑运算。异或的数学符号为“⊕”,计算机符号为“xor”。其运算法则为:a⊕b=(¬a∧b)∨(a

  • hive sql和mysql区别_mysql改表名语句

    hive sql和mysql区别_mysql改表名语句mssql的正式名字是SQLServerMS公司出的。图形操作界面好一些,性能还可以。在在mssql和oracle上不能互换.支持OLEDB连接.asp、mssaql只能forwindow mysql就是mysql下面是readme:免费软件。性能也可以。速度快,用于小规模.命令行界面.(可以装图形操作软件.) sqlserver我以前是做ASP的时候用的 现在学PHP

  • 什么是MVC ?

    什么是MVC ?

    2021年10月15日
  • solidworks第三方插件_使用方法

    solidworks第三方插件_使用方法前言mixins翻译成中文是混入,组件的意思。在DRF中,针对获取列表,检索,创建等操作,都有相应的mixin,一般我们自定义创建的类视图都会继承自GenericAPIView和Mixins一起使用

发表回复

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

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