<script type="text/javascript">
<!--
window.onload=function(){
  objDiv = document.getElementById('drag');
  drag(objDiv);
};

function drag(dv){
  dv.onmousedown=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.onmousemove=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.onmouseup=function(){
//取消捕获范围
           if(dv.releaseCapture){
              dv.releaseCapture();
           }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
           }
//清除事件
          d.onmousemove=null;
          d.onmouseup=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只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

JS拖动技术--- 关于setCapture的更多相关文章

  1. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

  2. 自己封装的一个原生JS拖动方法。

    代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...

  3. js拖动层原形版

    脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...

  4. React.js 常用技术要点

    最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...

  5. Node.JS + MongoDB技术浅谈

    看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座          云计算 +大数据 ...

  6. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. JS 拖动DIV 需要JQUERY 支持

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. touch.js 拖动、缩放、旋转 (鼠标手势)

    可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVa ...

  9. jQuery插件EasyDrag轻松实现JS拖动的效果

    jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...

随机推荐

  1. JavaBean-- 设置和取得属性

    <jsp:setProperty>标签一共有4种使用方法: 自动匹配:<jsp:setProperty name="实例化对象的名称(id)" property= ...

  2. Android 禁止屏幕休眠和锁屏的方法

    Introduction 常常我们开 发程序的时候我们不需要系统唤醒系统锁屏功能,比如我们在做xxxNowTV或XXX播放器这样的程序,用户有时候在看电视或视频的时候不希望系统的锁屏 功能启动,既不想 ...

  3. iOSFMDB和CoreData

    转发:http://wenku.baidu.com/link?url=LSPSZSPxN4pVwWNwqEXSoY0-jlnXq-_14C7qV1FV9_gFIMPjdKlXrG4Nrh_08EZS1 ...

  4. css一些特别效果设定

    在CSS中,BOX的Padding属性的数值赋予顺序为 padding:10px; 四个内边距都是10pxpadding:5px 10px; 上下5px 左右10pxpadding:5px 10px ...

  5. android脚步---APP引导页添加

    package com.leadcore.uudatoutie; import java.util.ArrayList; import com.leadcore.uudatoutie.R; impor ...

  6. Activity与Service之间交互并播放歌曲的实现代码

    Activity与Service之间交互并播放歌曲,为了方便,我把要播放的歌曲定死了,大家可以灵活改进 MService: 复制代码代码如下: package com.tiantian.test;im ...

  7. ant语法和规范

    一.前言: 以前在做JavaEE项目的时候曾经听说过这个名字,但是由于没有用到,所以也没有去学习.最近在研究Android打包的时候,看了下build.xml文件,甚是迷糊,于是学习一下,稍有心得. ...

  8. u-boot添加一个hello命令

    1.在common目录下建立一个cmd_hello.c文件 2.仿照/common/cmd_bootm.c文件修改,把cmd_bootm.c头文件复制过来 3.再复制do_bootm.U_BOOT_C ...

  9. c# winform 点击按钮切换tabcontrol标签

    this.tabControl1.TabPages.Remove(tabPage1); this.tabControl1.TabPages.Remove(tabPage2); this.tabCont ...

  10. Android音频系统之AudioPolicyService

    地址:http://blog.csdn.net/edmond999/article/details/18599327 1.1 AudioPolicy Service 在AudioFlinger小节,我 ...