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年8月23日
    6
  • keepalived+Nginx实现高可用主从集群

    keepalived+Nginx实现高可用主从集群

    2021年6月3日
    97
  • qt设置程序图标_qt设置软件图标

    qt设置程序图标_qt设置软件图标在qt应用程序中,我们能想到的图标一般就以下三种:icon种类应用窗口左上角的图标setWindowIcon()状态栏上显示的图标setWindowIcon()可执行程序本身的图标两种设置方式,下面会讲对于以上三种图标都该怎么样设置呢?一.我们先来讨论前两种,分别是窗口左上角的图标和状态栏的图标,    其实这两种图标只需要设置一次就可以了,他们总是相同的,并没有专门针对状态栏图标设置的函数。二…

    2025年8月1日
    2
  • pycharm 条件断点_linux打断点

    pycharm 条件断点_linux打断点前言遇到一个问题,由于数据量较大,直接debug调试太费时间,看了上面链接的博文,结合自身实践,于是有了这篇博文。流程打断点,右键断点,condition填入条件(当条件为true时会进入断点,开始调试),debug运行。具体如图。注:循环内赋值的变量可能无法使用,可用赋值前的变量代替,如b=A.a;条件里写A.a<100等等。其他debug用法只记录,不进行debug…

    2025年7月22日
    2
  • 【每天一个 Linux 命令】tree命令

    【每天一个 Linux 命令】tree命令1.前言本文主要讲解Linux系统上的tree命令的详细使用方法。tree命令是一个小型的跨平台命令行程序,用于递归地以树状格式列出或显示目录的内容。它输出每个子目录中的目录路径和文件,以及子目录和文件总数的摘要。tree程序可以在Unix和类Unix系统(如Linux)中使用,也可以在DOS、Windows和许多其他操作系统中使用。它为输出操作提供了各种选项,从文件选项、排序选项到图形选项,并支持XML、JSON和HTML格式的输出。在这篇教程中,我们将通过使用案例演示如何使用tree命令递归

    2022年7月24日
    11
  • sqlserver数据库同步工具_sql server数据库安装

    sqlserver数据库同步工具_sql server数据库安装 一、确认数据库运行环境是否配置正确打开SQLServerManagementStudio,新建查询: select*fromsys.servers GO //这里可得到原来的计算机名称。然后将其记录下来(复制即可)  看这里的name是否和你的服务器的计算机名称一样,如果一样可以跳到文档(二),否则请按如下操作更改 新建查询:

    2022年10月10日
    2

发表回复

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

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