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>