JS拖动技术 关于setCapture使用

 更新时间:2010年12月09日 18:34:35   作者:  
JS拖动技术 关于setCapture使用,学习js拖动效果的朋友可以参考下。
JS拖动技术--- 关于setCapture (转自 剑胆琴心-.Net学习笔记)
复制代码 代码如下:

<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>

相关文章

  • es6处理数组的方法汇总(非常详细)

    es6处理数组的方法汇总(非常详细)

    ES6中引入了一些新的数组方法,例如:Array.of(),Array.from()等,下面这篇文章主要给大家介绍了关于es6处理数组的方法汇总,需要的朋友可以参考下
    2023-06-06
  • JS 实现百度搜索功能

    JS 实现百度搜索功能

    这篇文章给大家介绍了js实现百度搜索功能,代码分为html部分和css折叠样式部分,具体实现代码大家参考下本文
    2018-02-02
  • 微信小程序网络封装(简单高效)

    微信小程序网络封装(简单高效)

    这篇文章主要介绍了微信小程序网络封装(简单高效),微信小程序的网络请求很便捷,直接调用就可以了。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 纯javaScript、jQuery实现个性化图片轮播【推荐】

    纯javaScript、jQuery实现个性化图片轮播【推荐】

    本文主要介绍了纯javaScript、jQuery实现个性化图片轮播的方法,并在文章结尾附上源码下载。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js parseInt("08")未指定进位制问题

    js parseInt("08")未指定进位制问题

    今天在做JS关于月份的判断,对于parseInt("01")到parseInt("07");都能得到正确的结果,但如果是parseInt("08")或parseInt("09")则返回0,首先看parseInt语法:parseInt(string, radix);
    2010-06-06
  • js求数组最大值的常用方法举例

    js求数组最大值的常用方法举例

    数组如何求最大值,想必很多的朋友都不会吧,下面这篇文章主要给大家介绍了关于js求数组最大值的常用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • javascript+dom树型菜单类,希望朋友们一起进步

    javascript+dom树型菜单类,希望朋友们一起进步

    javascript+dom树型菜单类,希望朋友们一起进步...
    2007-05-05
  • JavaScript ES6中const、let与var的对比详解

    JavaScript ES6中const、let与var的对比详解

    这篇文章主要给大家介绍了在JavaScript中const、let与var对比的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
    2017-06-06
  • javascript实现的网站访问量统计代码

    javascript实现的网站访问量统计代码

    本文文章通过两段代码实例给大家介绍了基于javascript实现网站访问量统计代码,对js实现网站访问量统计相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 小程序自定义tabBar组件封装

    小程序自定义tabBar组件封装

    这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论