JS拖拽元素 兼容IE

2015/05/05 53476

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>Document</title> 
    <style> 
     *{ 
        margin: 0px; 
        padding:0px; 
     } 
     #div1{ 
        width: 500px; 
        height: 500px; 
        position: relative; 
        border:1px solid #ff00ff; 
        top:100px; 
        left: 300px; 
     } 
     #div2{ 
        position: absolute; 
        width: 150px; 
        height: 150px; 
        top:0px; 
        left:0px; 
        background: #ff00ff; 
     } 
     .boxs{ 
        border:1px dashed #000000; 
        position: absolute; 
     } 
    </style> 
    <script> 
    function getpos(ev){ 
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 
      var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft; 
      return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop} 
   
    } 
    function addEvent(obj,even,fn){ /*事件绑定*/ 
       return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn); 
    } 
    function unEvent(obj,even,fn){ 
        return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn); 
    } 
      window.onload=function(){ 
         var odiv1=document.getElementById("div1"); 
             odiv2=document.getElementById("div2"); 
             disX=0; 
             disY=0; 
         addEvent(odiv2,"mousedown",function(ev){ 
               var eventr=ev||event; 
               pos=getpos(eventr); 
               disX=pos.x-this.offsetLeft; 
               disY=pos.y-this.offsetTop; 
               creatElement=document.createElement("div"); 
               creatElement.className="boxs"; 
               creatElement.style.width=odiv2.offsetWidth-2+"px"; 
               creatElement.style.height=odiv2.offsetHeight-2+"px"; 
               creatElement.style.top=odiv2.offsetTop+"px"; 
               creatElement.style.left=odiv2.offsetLeft+"px"; 
               div1.appendChild(creatElement); 
           document.onmousemove=function(ev){ 
            var eventr=ev||event; 
             pos=getpos(eventr); 
               creatElement.style.left=pos.x-disX+"px"; 
               creatElement.style.top=pos.y-disY+"px"; 
              if(creatElement.offsetTop<0){ 
               creatElement.style.top=0+"px"; 
              } 
              if(creatElement.offsetLeft<0){ 
               creatElement.style.left=0+"px"; 
              } 
              if(creatElement.offsetTop>odiv1.offsetHeight-odiv2.offsetHeight){ 
                 creatElement.style.top=odiv1.offsetHeight-odiv2.offsetHeight+"px"; 
              } 
               if(creatElement.offsetLeft>odiv1.offsetWidth-odiv2.offsetWidth){ 
                 creatElement.style.left=odiv1.offsetWidth-odiv2.offsetWidth+"px"; 
              } 
           } 
            document.onmouseup=function(){ 
                 odiv2.style.left=creatElement.offsetLeft+"px"; 
                 odiv2.style.top=creatElement.offsetTop+"px"; 
                 div1.removeChild(creatElement); 
                 unEvent(odiv2,"mousedown"); 
                 document.onmousemove=null; 
   
              } 
            return false; 
             }) 
               
      } 
    </script> 
</head> 
<body> 
  <div id="div1"> 
      <div id="div2"></div> 
  </div> 
</body> 
</html>