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


相关推荐

  • 游戏建模经验分享:模型学习方法

    游戏建模经验分享:模型学习方法最近通过很多师弟的交流,我发现游戏建模初学者大多存在三个大问题,一是工具的使用不够熟练,甚至有些功能还不知道,二是对布线的规范没有太大的要求和了解,三是对游戏制作流程不清晰和板绘下的功力不够,对贴图制作用工少,甚至有些人还处于一直做白膜的阶段,那么对大多说想要要学游戏建模的学习者想要学什么:低模,高模制作,贴图材质,动作特效。毕竟很多人学的并没有那么快,建模实质就是孰能生巧,做的东西…

    2022年5月19日
  • Poetry(1)Poetry介绍与安装

    Poetry(1)Poetry介绍与安装介绍Poetry是Python中的依赖管理和打包工具,当然它也可以配置虚拟环境。它允许您声明项目所依赖的库,并为您管理(安装/更新)它们。之前一直使用virtualenvwrapper管理虚拟

    2022年7月29日
  • Windows 进程 Tasklist查看 与 Taskkill结束

    Windows 进程 Tasklist查看 与 Taskkill结束目录Tasklist简述使用格式查看本机所有进程根据pid查询指定进程查看远程所有进程Taskkill简述根据进程PID结束根据进程图像名结束/f强制结束进程/t结束进程树Tasklist简述1、”Tasklist”命令是一个用来显示运行在本地或远程计算机上的所有进程的命令行工具,带有多个执行参数。类似Linux系统的ps命令2、显示…

    2022年6月5日
  • HDMI接口定义,传输流程

    HDMI接口定义,传输流程全文摘自:https://www.cnblogs.com/TaigaCon/p/3840653.htmlHDMI,全称为(HighDefinitionMultimediaInterface)高清多媒体接口,主要用于传输高清音视频信号。 HDMI引脚…

    2022年5月1日
  • 微信小程序抢票脚本怎么写_小程序抢票脚本

    微信小程序抢票脚本怎么写_小程序抢票脚本小程序抢票脚本@TOC微信小程序抢票脚本所使用的模块:request和re工具:pycharm和fiddler1.首先通过fiddler工具抓取到请求和参数选择场地信息url信息付款url信息2.代码部分,编写脚本选场地//选场地changdi_url=”https://sapb.szosc.cn/index.php/wxplace/place/pay”date={‘price’:’30’,’fieldtype’:”,

    2022年9月15日
  • NOIP-铺地毯_zamani地毯

    NOIP-铺地毯_zamani地毯NOIP-铺地毯

    2022年4月21日

发表回复

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

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