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月3日 上午9:20
下一篇 2022年5月3日 上午9:20


相关推荐

  • 算法 – 折半查找(C)

    算法 – 折半查找(C)分享一个大牛的人工智能教程 零基础 通俗易懂 风趣幽默 希望你也加入到人工智能的队伍中来 请点击 http www captainbed net RecursiveBin byChimomo 折半查找的前提 1 待查找序列必须采用顺序存储结构 2 待查找序列必须是按关键字大小有序排列 时间复杂度 O lo

    2026年3月16日
    2
  • Odin Inspector 系列教程 — 常见问题解答(FAQ)

    Odin Inspector 系列教程 — 常见问题解答(FAQ)1.Odin多达约90种不同的特性,有可以快速预览每种特性的效果吗?可以选择Tools/OdinInspector/AttributeOverview进行快速预览,如果需要更详细的说明,可以查看主页革命性Unity编辑器扩展工具—OdinInspector系列教程,配合示例工程服用效果更佳2.可以禁用指定的Odin绘制特性吗?Odin…

    2022年7月21日
    21
  • Java值传递与引用传递的区别

    Java值传递与引用传递的区别Java 值传递与引用传递文章目录 Java 值传递与引用传递前景实参与形参值传递与引用传递 Java 中的值传递总结前景关于这个问题 引发过很多广泛的讨论 看来很多程序员对于这个问题的理解都不尽相同 甚至很多人理解的是错误的 还有的人可能知道 Java 中的参数传递是值传递 但是说不出来为什么 在开始深入讲解之前 有必要纠正一下大家以前的那些错误看法了 如果你有以下想法 那么你有必要好好阅读本文 错误理解一 值传递和引用传递 区分的条件是传递的内容 如果是个值 就是值传递 如果是个引用 就是引用传递 错误

    2025年9月28日
    6
  • 前端UI框架汇总

    前端UI框架汇总本文整理了一些比较流行的前端 UI 框架 排名不分先后 仅供参考 可按照项目需求自行考虑 1 bootstrapBoo 是 Twitter 推出的一个用于前端开发的 一个用于 HTML CSS 和 JS 开发的开源工具包 是全球最受欢迎的前端组件库 用于开发响应式布局 移动设备优先的 WEB 项目 官网 https v4 bootcss com 文档 https v4

    2026年3月26日
    1
  • springboot 连接sftp服务器

    springboot 连接sftp服务器1 ftp 和 sftp 主要区别 FTP 是一种文件传输协议 一般是为了方便数据共享的 包括一个 FTP 服务器和多个 FTP 客户端 FTP 客户端通过 FTP 协议在服务器上下载资源 而 SFTP 协议是在 FTP 的基础上对数据进行加密 使得传输的数据相对来说更安全 但是这种安全是以牺牲效率为代价的 也就是说 SFTP 的传输效率比 FTP 要低 不过现实使用当中 没有发现多大差别 个人肤浅的认为就是 一 FTP 要安装 S

    2026年3月26日
    2
  • 在测试集上训练,还能中CVPR?这篇IEEE批判论文是否合理?

    在测试集上训练,还能中CVPR?这篇IEEE批判论文是否合理?在测试集上训练,还能中CVPR?这篇IEEE批判论文是否合理?

    2022年4月21日
    61

发表回复

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

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