创建一个绝对定位的元素，使其可以用鼠标移动。下面分别是HTML、CSS、JavaScript部分
1 <div id="draggable"> 2 <div id="main"> 3 <div id="title">拖拽</div> 4 <div id="content">内容</div> 5 </div> 6 </div> 7 /////////////CSS//////////////////////// 8 #draggable{ 9 left:100px; 10 top:100px; 11 background-color:#f0f3f9; 12 font-size:12px; 13 -moz-box-shadow:2px 2px 4px #666; 14 -webkit-box-shadow:2px 2px 4px #666; 15 position:absolute; 16 padding:5px; 17 } 18 #main{ 19 border:1px solid #a0b3d6; 20 background:white; 21 } 22 #title{ 23 line-height:24px; 24 background:#beceeb; 25 border-bottom:1px solid #a0b3d6; 26 padding-left:5px; 27 cursor:move; 28 } 29 #content{ 30 420px; 31 height:250px; 32 padding:10px 5px; 33 } 34 ////////////////JS////////////////////////////////
35 var EventUtil={ //创建一个对象，兼容浏览器 36 addHandler:function(element,type,handler){ //添加事件 37 if(element.addEventListener){ 38 element.addEventListener(type,handler,false); 39 }else if(element.attachEvent){ 40 element.attachEvent("on"+type,handler); 41 }else{ 42 element["on"+type]=handler; 43 } 44 }, 45 getEvent:function(event){ //获取事件对象 46 return event?event:window.event; 47 }, 48 getTarget:function(event){ //获取事件真正的目标 49 return event.target||event.srcElement; 50 }, 51 removeHandler:function(element,type,handler){ //去除事件 52 if(element.removeEventListener){ 53 element.removeEventListener(type,handler,false); 54 }else if(element.detachEvent){ 55 element.detachEvent("on"+type,handler); 56 }else{ 57 element["on"+type]=null; 58 } 59 } 60 }; 61 var DragDrop=function(){ //使用模块模式创建一个单例对象，封装所有的基本功能 62 var drag=document.getElementById("draggable"); 63 dragging=false, //通过这个值判断鼠标是按下还是放开 64 diffX=0, 65 diffY=0; 66 function handleEvent(event){ 67 event=EventUtil.getEvent(event); 68 var target=EventUtil.getTarget(event); 69 70 switch(event.type){ //根据不同的事件类型执行不同的操作 71 case "mousedown": 72 if(target.id=="title"){ 73 dragging=true; 74 diffX=event.clientX-drag.offsetLeft; 75 diffY=event.clientY-drag.offsetTop; 76 } 77 break; 78 case "mousemove": 79 if(dragging){ 80 drag.style.left=(event.clientX-diffX)+"px"; 81 drag.style.top=(event.clientY-diffY)+"px"; 82 } 83 break; 84 case "mouseup": 85 dragging=false; 86 break; 87 } 88 } 89 90 return { //返回一个单例对象 91 enable:function(){ //定义一个enable方法，添加事件处理程序 92 EventUtil.addHandler(document,"mousedown",handleEvent); 93 EventUtil.addHandler(document,"mousemove",handleEvent); 94 EventUtil.addHandler(document,"mouseup",handleEvent); 95 }, 96 disable:function(){ //定义一个disable方法，去除事件处理程序 97 EventUtil.removeHandler(document,"mousedown",handleEvent); 98 EventUtil.removeHandler(document,"mousemove",handleEvent); 99 EventUtil.removeHandler(document,"mouseup",handleEvent); 100 } 101 }; 102 103 }(); 104 105 DragDrop.enable(); //调用事件处理程序
