<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://www.cnblogs.com/Godblessyou/archive/2008/05/14/1196746.html

JS拖动技术--- 关于setCapture (转自 剑胆琴心-.Net学习笔记)相关推荐

  1. webpack:js、css、es6装载与压缩配置-学习笔记

    文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理 依赖包降级处理 ...

  2. js粘贴板为什么获取不到图片信息_JavaScript 学习笔记(3):图片库

    本文使用 Zhihu On VSCode 创作并发布 1. 为什么要使用图片库 可以把所有的图片都放到一个网页里,不过当图片过多时,会导致网页体积过大. 因此,为每张图片分别创建一个网页的解决方案. ...

  3. JS进阶 Day1 作用域 函数进阶 结构赋值(学习笔记)

    1.作用域 1)局部作用域 函数作用域 注:函数执行完毕后,函数内部的变量实际被清空了 块级作用域 在js中使用{}包裹的代码称为代码块,代码块内部声明的变量外部将{有可能}无法访问 let声明的变量 ...

  4. 【华为云技术分享】物体检测yolo3算法 学习笔记(1)

    [摘要] YOLO作为一个one-stage目标检测算法,在速度和准确度上都有杰出的表现.而YOLO v3是YOLO的第3个版本(即YOLO.YOLO 9000.YOLO v3),检测效果,更准更强. ...

  5. 【华为云技术分享】物体检测yolo3算法 学习笔记2

    先来看一下yolo3的结构图: 1.主体网络darknet53 最左边的这一部分叫做Darknet-53, (1)它最重要特点是使用了残差网络Residual,darknet53中的残差卷积就是进行一 ...

  6. 【技术管理】管理核心五要素 - 学习笔记

    可以把管理看作是:一位马车夫驾驶着一辆多匹马拉的马车赶往目的地.这个比喻体现了两大要素:带人和做事,只不过这里的"人"是一群拉车的马,而"事"就是驾驶马车. 如 ...

  7. 传感器技术—气敏电阻式传感器(学习笔记四)

    气敏电阻式传感器 3.3.1 气敏电阻式传感器的工作原理 3.3.2 气敏电阻式传感器的结构和分类 1.按结构分 2.按加热方式分 3.3.3 气敏电阻式传感器的应用与检测 1.简易家用气体报警器 2 ...

  8. 【技术管理】团队建设六要素 - 学习笔记

    作为一个管理者,如何群策群力打胜仗? "群策群力"就是如何带好团队(带人),"打胜仗"就是如何取得好的业绩(做事). 那么,究竟怎么带好团队呢?带团队需要从哪几 ...

  9. 《尚硅谷高级技术之JUC高并发编程》学习笔记11—— Fork / Join 框架

    文章目录 Fork / Join 框架简介 fork() 方法 join() 方法 Fork / Join 框架的异常处理 入门案例 总结 Fork / Join 框架简介 Fork / Join 它 ...

  10. java jdk 8学习笔记,Java JDK 8学习笔记 PDF_源雷技术空间

    资源名称:Java JDK 8学习笔记 PDF 内容简介: ●本书是作者多年来教学实践经验的总结,汇集了学员在学习课程或认证考试中遇到的概念.操作.应用等问题及解决方案 ●针对Java SE 8新功能 ...

最新文章

  1. matlab ga rbf,GA PSO优化的RBF神经网络
  2. 利用jQuery对无序列表排序 http://www.apkbus.com/android-80639-1-1.html
  3. Part8 多态性 8.2虚函数
  4. javascript中判断对象是否为空几种场景
  5. 大二暑假周进度报告(五)
  6. [Java基础]字符流读写数据的方式
  7. H264编码 封装成MP4格式 视频流 RTP封包
  8. excel怎么添加diy工具箱_这些Excel插件让你的Excel更好用!
  9. FreeRTOS学习及移植笔记之一:开始FreeRTOS之旅
  10. 关于LUA+Unity开发_XLua篇
  11. 初识 NGINX 服务网格
  12. dedecms网站轮播本地显示为什么上传到服务器就不显示了,dedecms后台上传图片实现图片轮播的方法...
  13. fenby C语言 P17
  14. 使用Nssm部署Exe程序为服务
  15. Jmeter 接口测试post请求数据失败
  16. 多个同1div float left换行题
  17. 基于SSM第一医院病案管理系统
  18. 基于Qemu虚拟vexpress-a9开发板,实现完整系统启动(uboot+kernel+rootfs)
  19. React脚手架搭建项目
  20. grasshopper elk插件_Grasshopper常用插件汇总

热门文章

  1. HTML5 — 知识总结篇《IV》【实体字符】
  2. L1-048 矩阵A乘以B (15 分)—团体程序设计天梯赛
  3. Android 柱状图(自定义View)
  4. Amlogic_t962x_android7.1红外遥控驱动浅析
  5. Gym - 102163M
  6. 【现代软件工程】6月中旬团队项目心得
  7. 转浅谈缓存击穿、缓存并发和缓存失效
  8. java 线程协作 wait(等待)与 notiy(通知)
  9. mybatis对mysql进行分页
  10. JavaScript的Forms验证-Parsley.js