随笔-5  评论-41  文章-13  trackbacks-0
javascript Element拖拽功能

在页面中包含如下代码之后，使用makeDraggable(item)来使页面元素可以拖拽

 1    
 2document.onmousemove = mouseMove;
 3document.onmouseup   = mouseUp;
 4
 5var dragObject  = null;
 6var mouseOffset = null;
 7var maxTop = null;
 8var maxWidth = null;
 9
10function getMouseOffset(target, event){
11    event = event || window.event;
12
13    var docPos    = getPosition(target);
14    var mousePos  = mouseCoords(event);
15    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
16}
17
18function getPosition(e){
19    var left = 0;
20    var top  = 0;
21
22    while (e.offsetParent){
23        left += e.offsetLeft;
24        top  += e.offsetTop;
25        e     = e.offsetParent;
26    }
27
28    left += e.offsetLeft;
29    top  += e.offsetTop;
30
31    return {x:left, y:top};
32}
33
34function mouseMove(event){
35    event           = event || window.event;
36    var mousePos = mouseCoords(event);
37
38    if(dragObject){
39        dragObject.style.position = 'absolute';
40        var tmpTop = mousePos.y - mouseOffset.y;
41        if(tmpTop<10){
42            tmpTop = 10;
43        }
44        if(tmpTop>maxTop){
45            tmpTop = maxTop;
46        }
47        var tmpLeft = mousePos.x - mouseOffset.x;
48        if(tmpLeft<10){
49            tmpLeft = 10;
50        }
51        if(tmpLeft>maxWidth){
52            tmpLeft = maxWidth;
53        }
54        dragObject.style.top = tmpTop + "px";
55        dragObject.style.left = tmpLeft + "px";
56        return false;
57    }
58}
59function mouseUp(){
60    dragObject = null;
61}
62
63function mouseCoords(event){
64    if(event.pageX || event.pageY){
65        return {x:event.pageX, y:event.pageY};
66    }
67    return {
68        x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
69        y:event.clientY + document.body.scrollTop  - document.body.clientTop
70    };
71}
72
73function makeDraggable(item){
74    if(!item) return;
75    item.onmousedown = function(event){
76        dragObject  = this.parentNode;
77        mouseOffset = getMouseOffset(this, event);
78        if(window.innerHeight>document.body.clientHeight){
79            maxTop = window.innerHeight-dragObject.offsetHeight-50;
80        }else{
81            maxTop = document.body.clientHeight-dragObject.offsetHeight-10;
82        }
83        maxWidth = document.body.clientWidth-dragObject.offsetWidth-10;
84        return true;
85    }
86}
posted on 2006-12-12 17:34 OO 阅读(826) 评论(1)  编辑  收藏 所属分类: java相关的乱七八糟的东西

评论:
# re: javascript Element拖拽功能 2007-03-29 16:21 | 王鑫
想要这个功能  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 OO