js实现拖拽函数

如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。

onmousedown：鼠标按下事件
onmousemove：鼠标移动事件
onmouseup：鼠标抬起事件

拖拽状态 = 0鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}

html代码

1 <div style="" >
2         <div style="" >
3         </div>
4 </div>

css代码

1 #parent{
2     position:relative;
3     width:500px;
4     height:500px;
5     background:#ccc;
6 }
7 #child{
8     position:absolute;
9     width:500px;
10     height:500px;
11     top:0;
12     left:0;
13     cursor:pointer;
14     background:#f00;
15 }

js代码

     参数说明：当参数为一个时，拖动元素相对于浏览器窗口拖动

　　　　　　　　当参数为两个时，拖动元素相对于指定的父元素拖动

　　　　　　　　obj：被拖动元素的id

　　　　　　　　parentNode：被拖动元素相对拖动的父盒子id

1     /*******************拖拽函数***********************/
2     function drag(obj,parentNode){
3           var obj = document.getElementById(obj);
4           if(arguments.length == 1){
5             var parentNode = window.self;
6             var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;
7             /*console.log("pWidth:"+pWidth+",pHeight:"+pHeight);*/
8           }else{
9             var parentNode = document.getElementById(parentNode);
10             var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
11           }
12           obj.onmousedown = function(ev){
13             var ev = ev || event;
14             /*console.log("clientX:"+ev.clientX+",clientY:"+ev.clientY);
15             console.log("this.offsetLeft:"+this.offsetLeft+",this.offsetTop:"+this.offsetTop);*/
16             var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
17             var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
18
19             //阻止冒泡时间
20             ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
21
22
23             document.onmousemove = function(ev){
24               var ev = ev || event;
25               obj.style.left = ev.clientX - disX + 'px';
26               obj.style.top = ev.clientY - disY+ 'px';
27               /*console.log("disX:"+disX+",disY:"+disY);
28               console.log("obj.style.left:"+obj.style.left+",obj.style.top:"+obj.style.top);  */
29               //左侧
30               if(obj.offsetLeft <=0){
31                 obj.style.left = 0;
32                /* console.log("111111111111111111111111");*/
33               };
34               //右侧
35               if(obj.offsetLeft >= pWidth - oWidth){
36                 obj.style.left = pWidth - oWidth + 'px';
37               };
38               //上面
39               if(obj.offsetTop <= 0){
40                 obj.style.top = 0;
41               };
42               //下面
43               if(obj.offsetTop >= pHeight - oHeight){
44                 obj.style.top = pHeight - oHeight + 'px';
45               };
46             };
47             document.onmouseup = function(ev){
48               var ev = ev || event;
49               document.onmousemove = document.onmouseup = null;
50             };
51           }
52
53     }

调用拖拽函数

drag("child","parentNode");