Javascript实现对象的拖动操作

转载 2006年06月23日 11:56:00
学着写的一段鼠标拖动的代码,感觉挺有意思。
本例需要掌握的技巧比较多,捕捉鼠标,获取鼠标位置(相当于对象),释放鼠标捕捉,文档的滚动距离。
1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。
2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
3.       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
4.       releaseCapture() 释放当前文档中对象的鼠标捕捉。
5.       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
6.       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
7.       with 为一个或多个语句设定默认对象。
8.       event.x,event.y 设置或获取鼠标指针位置相对于窗口对象的 x ,y坐标。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  
<title></title>
  
<style type="text/css">
  #l1
{
    position
:absolute;top:100px;left:100px;
    width
:100px;height:150px;border:1px solid #ccc;
    background
:#f00;
    z-index
:1
    
}
  #l2
{
    position
: absolute;top:150px;left:150px;
    width
:100px;height:150px;border:1px solid #666;
    background
:#0f0;
    z-index
:2
  
}
  #l3
{
    position
: absolute;top:200px;left:200px;
    width
:100px;height:150px;border:1px solid #999;
    background
:#00f;
    z-index
:3;
  
}
  
</style>
  
<script type="text/javascript">
    
var x,y,z,down=false,obj;
    
function init(){
        obj
=event.srcElement;   //获取焦点对象
        obj.setCapture();           //设置鼠标捕捉
        z=obj.style.zIndex;         //取得原z轴位置
        obj.style.zIndex=100;       //设定在最上层
        x=event.offsetX;            //获取鼠标指针相对于触发事件的对象的x位置
        y=event.offsetY;            //获取鼠标指针相对于触发事件的对象的y位置
        down=true;                  //设置鼠标状态为按下状态
    }
    
function moveIt(){
        
if(down&&event.srcElement==obj){
            
with(obj.style){
                posLeft
=document.body.scrollLeft+event.x-x;
                posTop
=document.body.scrollTop+event.y-y;
            }
        }
    }
    
function stopDrag(){
        down
=false;
        obj.style.zIndex
=z;
        obj.releaseCapture();
    }
  
</script>
</head>
<body>
<div id="l1" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level1</div>
<div id="l2" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level2</div>
<div id="l3" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level3</div>
</body>
</html>

javascript Range对象跨浏览器常用操作

转摘自: http://kjah.iteye.com/blog/420624 最近在开发在线代码编辑器的过程中频繁接触Range对象,由于跨浏览器的需求,使用到ie下TextRang...

JavaScript对象之数值操作-Number

Number数值运算在一般应用中都是相当常用的,如“四舍五入”,“格式化数值长度”,“保留几位小数”等操作都是很有必要的。...
  • boonya
  • boonya
  • 2016年08月26日 14:35
  • 299

Javascript:字符串对象(string)的基本操作

Javascript字符串基本操作。

JavaScript 之 Math 对象操作

Math 对象用于执行数学任务。 一、使用 Math 的属性和方法的语法: var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 注释:Ma...
  • iOSbird
  • iOSbird
  • 2017年02月24日 08:58
  • 134

javascript操作Document对象

1)Document元数据属性: characterSet——返回文档的字符集编码,这是一个只读属性; charset——获取或设置文档的字符集编码; compatMode——获取文档的兼容性模式(C...
  • bboyjoe
  • bboyjoe
  • 2015年07月15日 17:17
  • 1401

JavaScript日志操作对象实例

学完JavaScript,部分小结可参看我以前的博客《JavaScript中的正则表达式》、《JavaScript中的细节》、《自建JavaScript函数库》、《JavaScript中的面向对象》、...
  • ilvu999
  • ilvu999
  • 2012年08月16日 02:14
  • 360

让操作javascript对象数组像.net lamda表达式一样

让操作javascript对象数组像.net lamda表达式一样   随着web应用程序的富客户端化、ajax的广泛使用及复杂的前端业务逻辑。对js对象数组、json数组的各种操作越来越多、越来越复...

Javascript中对象的声明和操作

Javascript 是基于对象的语言,它没有类的概念,但是

JavaScript数组对象操作方法属性全集合

数组对象的3个属性 1、length 属性     Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言...

从零开始学_JavaScript_系列(40)——对象的扩展(3)当枚举、原型链遇见对属性的操作

0、一句话总结 属性名,以及是属性的函数的简洁写法,写起来简单易阅读属性名可以用变量字符串拼接起来(话说以前也有吧?)函数都有name属性,但set和get也要加前缀Object.is判断两个变...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript实现对象的拖动操作
举报原因:
原因补充:

(最多只允许输入30个字)