http://jsfiddle.net/dtdxrk/tuc8w/7/embedded/result/
思路很简单 鼠标点击触发事件 元素跟随鼠标移动 鼠标放开清除事件
主要是计算元素的位置
鼠标在元素上按下的时候
记录下鼠标的x和y坐标
记录下元素的x和y坐标
鼠标在元素上移动的时候
元素y = 现在鼠标y - 原来点击鼠标y + 原来元素y
元素x = 现在鼠标x - 原来点击鼠标x + 原来元素x
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js拖拽方法</title> 6 <style type="text/css"> 7 body{margin:0} 8 .box{ 9 width:350px; 10 border:1px solid #cfcfcf; 11 box-shadow:2px 3px 0 rgba(190,190,190,0.3); 12 text-align:center; 13 padding-bottom:20px; 14 background-color: #fff; 15 z-index: 100; 16 position: absolute; 17 padding: 0; 18 } 19 .box h1{ 20 height:30px; 21 line-height:30px; 22 font-size:14px; 23 text-align: left; 24 margin:0 0 20px 0; 25 background-color:green; 26 color:#fff; 27 border-bottom: 1px solid #cfcfcf; 28 padding-left:15px; 29 cursor:move; 30 } 31 </style> 32 33 <body> 34 35 <div class="box" id="popBox" style="top:0px;left:0px;"> 36 <h1>Js拖拽一个方法</h1> 37 <p> 38 39 </p> 40 </div> 41 42 <div class="box" id="popBox2" style="top:80px;left:0px;"> 43 <h1>Js可拖拽的弹出框</h1> 44 <p> 45 <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" width="270" height="129"> 46 </p> 47 </div> 48 49 <script type="text/javascript"> 50 function Drag(id, zindex){ 51 var box = document.getElementById(id), 52 h1 = box.getElementsByTagName("h1")[0]; 53 var scrollHeight = window.screen.availHeight, 54 scrollWidth = window.screen.availWidth; 55 box.style.zIndex = zindex; 56 57 h1.onmousedown = function(event){ //鼠标按钮被按下 58 box.style.opacity = 0.5; 59 box.style.filter = "alpha(opacity=50)"; 60 var event = window.event || event; 61 var mouseX = event.clientX, 62 mouseY = event.clientY, 63 objY = parseInt(box.style.top), 64 objX = parseInt(box.style.left); 65 66 document.onmousemove = function(event){ 67 var event = window.event || event; 68 box.style.top = event.clientY - mouseY + objY + "px", 69 box.style.left =event.clientX - mouseX + objX + "px"; 70 } 71 72 document.onmouseup = function(){ //鼠标按键松开 73 box.style.opacity = 1; 74 box.style.filter = "alpha(opacity=100)"; 75 document.onmousemove = null; 76 } 77 } 78 } 79 80 81 82 var box1 = new Drag("popBox",2); 83 var box2 = new Drag("popBox2",3); 84 85 </script> 86 87 </body> 88 </html>