KiMoGiGi 技术文集

不在乎选择什么，而在乎坚持多久……
IT博客 首页 联系 聚合 管理
  185 Posts :: 14 Stories :: 48 Comments :: 0 Trackbacks
Javascript实现对象的拖动操作
本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离。
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坐标。
 1 < html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"  lang ="en" >
 2 < head >
 3    < title ></ title >
 4    < style  type ="text/css" >
 5   #l1 {
 6     position : absolute ; top : 100px ; left : 100px ;
 7     width : 100px ; height : 150px ; border : 1px solid #ccc ;
 8     background : #f00 ;
 9     z-index : 1
 10      }
11   #l2 {
12     position :  absolute ; top : 150px ; left : 150px ;
13     width : 100px ; height : 150px ; border : 1px solid #666 ;
14     background : #0f0 ;
15     z-index : 2
 16    }
17   #l3 {
18     position :  absolute ; top : 200px ; left : 200px ;
19     width : 100px ; height : 150px ; border : 1px solid #999 ;
20     background : #00f ;
21     z-index : 3 ;
22    }
23    </ style >
24    < script  type ="text/javascript" >
25      var  x,y,z,down = false ,obj;
 26      function  init() {
 27         obj = event.srcElement;    // 获取焦点对象
28         obj.setCapture();            // 设置鼠标捕捉
29         z = obj.style.zIndex;          // 取得原z轴位置
30         obj.style.zIndex = 100 ;        // 设定在最上层
31         x = event.offsetX;             // 获取鼠标指针相对于触发事件的对象的x位置
32         y = event.offsetY;             // 获取鼠标指针相对于触发事件的对象的y位置
33         down = true ;                   // 设置鼠标状态为按下状态
34     }
35      function  moveIt() {
 36          if (down && event.srcElement == obj) {
 37              with (obj.style) {
 38                 posLeft = document.body.scrollLeft + event.x - x;
 39                 posTop = document.body.scrollTop + event.y - y;
 40             }
41         }
42     }
43      function  stopDrag() {
 44         down = false ;
 45         obj.style.zIndex = z;
 46         obj.releaseCapture();
 47     }
48    </ script >
49 </ head >
50 < body >
51 < div  id ="l1"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level1 </ div >
52 < div  id ="l2"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level2 </ div >
53 < div  id ="l3"  onmousedown ="init()"  onmousemove ="moveIt()"  onmouseup ="stopDrag()" > level3 </ div >
54 </ body >
55 </ html >

摘至 A JavaScript Fancier

posted on 2006-06-23 13:32 KiMoGiGi 阅读(225) 评论(0)  编辑 收藏 引用 所属分类: JavaScript
只有注册用户登录后才能发表评论。