最近做項目，碰到一個問題，需要對div實現拖動效果。
在度娘找了很多，要么覺得代碼太長，要么就是效果不理想，不過最后還是找到了一個不錯的，感謝大神的留貼，方便了我們，就把代碼貼下面了：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <title>Qing's Web</title> 7 <script src="js/jquery-1.11.0.js" type="text/javascript"></script> 8 <style type="text/css"> 9 10 .moveBar { 11 position: absolute; 12 width: 250px; 13 height: 300px; 14 background: #666; 15 border: solid 1px #000; 16 margin: 0px; 17 left:200px; 18 top:200px; 19 } 20 21 #banner { 22 background: #52CCCC; 23 cursor: move; 24 } 25 </style> 26 </head> 27 28 <body > 29 30 <div class="moveBar"> 31 <div id="banner">按住此處移動當前div</div> 32 <div class="content">這里是其它內容</div> 33 </div> 34 35 <script> 36 jQuery(document).ready( 37 function() { 38 $('#banner').mousedown( 39 function(event) { 40 var isMove = true; 41 var abs_x = event.pageX - $('div.moveBar').offset().left; 42 var abs_y = event.pageY - $('div.moveBar').offset().top; 43 $(document).mousemove(function(event) { 44 if(isMove) { 45 var obj = $('.moveBar'); 46 obj.css({ 47 'left': event.pageX - abs_x, 48 'top': event.pageY - abs_y 49 }); 50 } 51 }).mouseup( 52 function() { 53 isMove = false; 54 } 55 ); 56 } 57 ); 58 } 59 ); 60 </script> 61 </body> 62 63 </html>
這段代碼實現了div的拖動效果，但是因為和項目有出入
原因：
項目上的div是有margin屬性的，如果直接使用上面的代碼，會出現鼠標位置錯位，和拖動晃動
解決方法是：
當鼠標光標位置在"#banner"里面是，去除margin屬性，並給".moveBar"的left屬性和top屬性添加margin的大小
詳細見下面代碼實現
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <title>Qing's Web</title> 7 <script src="js/jquery-1.11.0.js" type="text/javascript"></script> 8 <style type="text/css"> 9 10 .moveBar { 11 position: absolute; 12 width: 250px; 13 height: 300px; 14 background: #666; 15 border: solid 1px #000; 16 margin: 50px; 17 left:200px; 18 top:200px; 19 } 20 21 #banner { 22 background: #52CCCC; 23 cursor: move; 24 } 25 </style> 26 </head> 27 28 <body > 29 30 <div class="moveBar"> 31 <div id="banner">按住此處移動當前div</div> 32 <div class="content">這里是其它內容</div> 33 </div> 34 35 <script> 36 jQuery(document).ready( 37 function() { 38 $('#banner').mousedown( 39 function(event) { 40 41 $(".moveBar").css("margin","0px") 42 43 var isMove = true; 44 var abs_x = event.pageX - ($('div.moveBar').offset().left+50); 45 var abs_y = event.pageY - ($('div.moveBar').offset().top+50); 46 $(document).mousemove(function(event) { 47 if(isMove) { 48 var obj = $('.moveBar'); 49 obj.css({ 50 'left': event.pageX - abs_x, 51 'top': event.pageY - abs_y 52 }); 53 } 54 }).mouseup( 55 function() { 56 var obj = $('.moveBar'); 57 //還原樣式，並獲取 58 obj.css({ 59 'left': $('div.moveBar').offset().left-50, 60 'top': $('div.moveBar').offset().top-50 61 }); 62 $(".moveBar").css("margin-left","50px") 63 $(".moveBar").css("margin-top","50px") 64 65 isMove = false; 66 } 67 ); 68 } 69 ); 70 } 71 ); 72 </script> 73 </body> 74 75 </html>
注： 不過還是有點遺憾的 如果這么做的話，會有晃動效果
可以進行一下修改
1.在鼠標進入"#banner"時，就修改margin屬性
修改代碼如下：
1 <script> 2 $("#banner").mouseenter(function(e) { 3 var obj = $('.moveBar'); 4 obj.css("margin", "0px"); 5 obj.css({ 6 'left': $('div.moveBar').offset().left + 50, 7 'top': $('div.moveBar').offset().top + 50 8 }); 9 }) 10 $("#banner").mouseout(function() { 11 var obj = $('.moveBar'); 12 //還原樣式，並獲取 13 obj.css({ 14 'left': $('div.moveBar').offset().left - 50, 15 'top': $('div.moveBar').offset().top - 50 16 }); 17 $(".moveBar").css("margin-left", "50px") 18 $(".moveBar").css("margin-top", "50px") 19 }) 20 jQuery(document).ready( 21 function() { 22 $('#banner').mousedown( 23 function(event) { 24 /*$(".moveBar").css("margin","0px")*/ 25 var isMove = true; 26 var abs_x; 27 var abs_y; 28 abs_x = event.pageX - $('div.moveBar').offset().left; 29 abs_y= event.pageY - $('div.moveBar').offset().top; 30 $(document).mousemove(function(event) { 31 if(isMove) { 32 var obj = $('.moveBar'); 33 obj.css({ 34 'left': event.pageX - abs_x, 35 'top': event.pageY - abs_y 36 }); 37 } 38 }).mouseup( 39 function() { 40 isMove = false; 41 } 42 ); 43 }); 44 } 45 ); 46 </script>
希望可以幫上需要的人，畢竟自己也是小白
對於更復雜的程序，我想也是這樣的道理吧