最近做项目，碰到一个问题，需要对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>
希望可以帮上需要的人，毕竟自己也是小白
对于更复杂的程序，我想也是这样的道理吧