拖放功能

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>drag</title>
 6     <style type="text/css">
 7     .draggable{position: absolute;width:432px;height:424px;background: url(cat.jpg) no-repeat;cursor: pointer;}
 8     </style>
 9 </head>
10 <body>
11 <div id="myDiv" class="draggable">
12     <!-- <img src="cat.jpg" alt="" /> -->
13 </div>
14 
15     <canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
16 
17 
18     <script type="text/javascript">
19 
20     var addEvent = document.addEventListener ? function(el, type, fn){
21         el.addEventListener(type, fn, false);
22     } : function(el, type, fn){
23         el.attachEvent("on" + type, function(){
24             fn.apply(el, arguments);
25         });
26     };
27 
28     var removeEvent = document.removeEventListener ? function(el, type, fn){
29         el.removeEventListener(type, fn, false);
30     } : function(el, type, fn){
31         el.detachEvent("on" + type, function(){
32             fn.apply(el, arguments);
33         });
34     };
35 
36     var myDiv = document.getElementById("myDiv");
37 
38     var DragDrop = function(){
39         var dragging = null,
40             diffX = 0,
41             diffY = 0;
42 
43         function handleEvent(event){
44 
45             // 获取事件和目标
46             event = event || window.event;
47             var target = event.target || event.srcElement;
48             console.log("target:",target);
49 
50             switch(event.type){
51                 case "mousedown":
52                     console.log("case 1");
53                     if(target.className.indexOf("draggable") > -1){
54                         dragging = target;
55                         diffX = event.clientX - target.offsetLeft;
56                         diffY = event.clientY - target.offsetTop;
57                     }
58                     break;
59                 case "mousemove":   
60                     
61                     if(dragging !== null){
62                         console.log("case 2");
63                         // 指定位置
64                         dragging.style.left = event.clientX - diffX + 'px';
65                         dragging.style.top = event.clientY - diffY + 'px';
66                     }
67                     break;
68                 case "mouseup" :
69                     console.log("case 3");
70                     dragging = null;
71                     break;
72             }
73         }
74 
75         // 公共接口
76         return {
77             enable : function(){
78                 console.log("started");
79                 addEvent(document, "mousedown", handleEvent);
80                 addEvent(document, "mousemove", handleEvent);
81                 addEvent(document, "mouseup", handleEvent);
82             },
83             disable : function(){
84                 removeEvent(document, "mousedown", handleEvent);
85                 removeEvent(document, "mousemouve", handleEvent);
86                 removeEvent(document, "mouseup", handleEvent);
87             }
88         }
89     }();
90     DragDrop.enable();
91     //DragDrop.disable();
92     </script>
93 </body>
94 </html>