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操作Document对象

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

JavaScript中对DOM对象进行操作

一、什么是DOM对象  DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。 二、DOM节点树  在HTML中所有...
  • Hchengbowen
  • Hchengbowen
  • 2017年01月04日 16:43
  • 1112

JavaScript拖拽图片一

本文演示如何将一张图片用鼠标拖拽到某个位置。先看html代码: drag demo 注意,必须在style中指定三个属性:...
  • sheismylife
  • sheismylife
  • 2012年07月09日 19:17
  • 6403

JavaScript 实现简单的拖拽效果

之前一直对js中常用坐标属性不是很熟,特意花了一个下午的时间研究,并写了一个实现元素拖动的函数,在这边分享一下。(如果有不对的地方,还请批评指正~) 先介绍一下实现元素拖动需要的坐标属性。offs...
  • zwkkkk1
  • zwkkkk1
  • 2017年10月02日 09:48
  • 463

Javascript 如何实现对象的拖动?

Javascript 如何实现对象的拖动? 解决思路     这个效果并不算常见,通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的,所以对鼠标的位置的捕获是问题的重点,然后才是根据鼠标的位置设置层的...
  • gsw365
  • gsw365
  • 2007年11月05日 17:28
  • 377

Javascript 如何实现对象的拖动?

Javascript 如何实现对象的拖动? 解决思路     这个效果并不算常见,通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的,所以对鼠标的位置的捕获是问题的重点,然后才是根据鼠标的位置设置层的...
  • june1984
  • june1984
  • 2007年06月04日 18:02
  • 315

Javascript 如何实现对象的拖动

解决思路     这个效果并不算常见,通常用于游戏或个人站点中。因为拖曳是靠鼠标来操作的,所以对鼠标的位置的捕获是问题的重点,然后才是根据鼠标的位置设置层的位置。 具体步骤: 1.在对象(层)上按下鼠...
  • EndAll
  • EndAll
  • 2006年12月22日 11:25
  • 876

js拖拽和放置(javascript drag and drop)

 Submitted by koyoz on 2008, June 8, 10:49 PM. javascriptjs拖拽和放置效果.这个drag-drop.htmlXML/HTML代码>   htm...
  • a9529lty
  • a9529lty
  • 2008年07月25日 09:50
  • 9111

Javascript 对象访问语句

for...in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。不要用for in遍历数组,全部统一采用标准的for循环变量数组( 我们无法保证我们引入的js是否会采用proto...
  • aoshilang2249
  • aoshilang2249
  • 2016年06月30日 17:52
  • 437

javascript json对象操作(基本增删改查)

/** * Json对象操作,增删改查 * * @author lellansin * @blog www.lellansin.com * @version 0.1 * * 解决一...
  • qingyanhuan
  • qingyanhuan
  • 2016年11月03日 08:50
  • 1450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript实现对象的拖动操作
举报原因:
原因补充:

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