1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #ul1 {margin: 50px auto 0; padding: 0; width:630px; position: relative;} 8 li {float: left; margin: 0 10px 10px 0; width: 200px; height: 150px; list-style: none;} 9 li img {display: block;} 10 </style> 11 <script type="text/javascript"> 12 window.onload=function() 13 { 14 var oul = document.getElementById("ul1"); 15 var ali = document.getElementsByTagName("li"); 16 var lilen = ali.length; 17 //转换定位 18 // for (var i=0;i<lilen;i++) { 19 // ali[i].style.position = "absolute"; 20 // } 21 //创建一个数组保存 每个图片的位置 22 var picwz =[]; 23 for (var i=0;i<lilen;i++) { 24 picwz.push({ 25 left:ali[i].offsetLeft, 26 top:ali[i].offsetTop 27 }) 28 } 29 for (var i=0;i<lilen;i++) { 30 ali[i].style.left = picwz[i].left +"px"; 31 ali[i].style.top = picwz[i].top +"px"; 32 ali[i].style.position = "absolute"; 33 drag(ali[i])//调用拖动图片函数 34 } 35 function drag(obj) 36 { 37 var disX = 0; 38 var disY = 0; 39 obj.onmousedown = function(ev) 40 { 41 var ev = ev || event; 42 disX = ev.clientX - obj.offsetLeft ; 43 disY = ev.clientY - obj.offsetTop ; 44 document.onmousemove = function(ev) 45 { 46 var ev = ev || event; 47 obj.style.left = ev.clientX - disX +"px"; 48 obj.style.top = ev.clientY - disY +"px"; 49 } 50 obj.onmouseup =function() 51 { 52 document.onmousemove = null; 53 obj.onmouseup = null; 54 } 55 return false; 56 } 57 } 58 } 59 </script> 60 </head> 61 <body> 62 <ul id="ul1"> 63 <li><img src="photo/1.jpg" alt="" /></li> 64 <li><img src="photo/2.jpg" alt="" /></li> 65 <li><img src="photo/3.jpg" alt="" /></li> 66 <li><img src="photo/4.jpg" alt="" /></li> 67 <li><img src="photo/5.jpg" alt="" /></li> 68 <li><img src="photo/1.jpg" alt="" /></li> 69 <li><img src="photo/2.jpg" alt="" /></li> 70 <li><img src="photo/3.jpg" alt="" /></li> 71 <li><img src="photo/4.jpg" alt="" /></li> 72 </ul> 73 74 </body> 75 </html>