js实现拖拽函数

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

1. onmousedown：鼠标按下事件
2. onmousemove：鼠标移动事件
3. onmouseup：鼠标抬起事件

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

html代码

1 <div style="" id="parent">
2         <div style="" id="child">
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");

 

转载于:https://www.cnblogs.com/i-want-to-be-like-an-sun/p/7515212.html