HTML 通过js实现div的拖动效果

最近做项目，碰到一个问题，需要对div实现拖动效果。

在度娘找了很多，要么觉得代码太长，要么就是效果不理想，不过最后还是找到了一个不错的，感谢大神的留贴，方便了我们，就把代码贴下面了：

 <!DOCTYPE html>
 <html lang="zh">

     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Qing's Web</title>
         <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
         <style type="text/css">

             .moveBar {
                 position: absolute;
                 width: 250px;
                 height: 300px;
                 background: #666;
                 border: solid 1px #000;
                 margin: 0px;
                 left:200px;
                 top:200px;
             }

             #banner {
                 background: #52CCCC;
                 cursor: move;
             }
         </style>
     </head>

     <body >

         <div class="moveBar">
             <div id="banner">按住此处移动当前div</div>
             <div class="content">这里是其它内容</div>
         </div>

         <script>
             jQuery(document).ready(
                 function() {
                     $('#banner').mousedown(
                         function(event) {
                             var isMove = true;
                             var abs_x = event.pageX - $('div.moveBar').offset().left;
                             var abs_y = event.pageY - $('div.moveBar').offset().top;
                             $(document).mousemove(function(event) {
                                 if(isMove) {
                                     var obj = $('.moveBar');
                                     obj.css({
                                         'left': event.pageX - abs_x,
                                         'top': event.pageY - abs_y
                                     });
                                 }
                             }).mouseup(
                                 function() {
                                     isMove = false;
                                 }
                             );
                         }
                     );
                 }
             );
         </script>
     </body>

 </html>

这段代码实现了div的拖动效果，但是因为和项目有出入

原因：

　　项目上的div是有margin属性的，如果直接使用上面的代码，会出现鼠标位置错位，和拖动晃动

解决方法是：

　　当鼠标光标位置在"#banner"里面是，去除margin属性，并给".moveBar"的left属性和top属性添加margin的大小

详细见下面代码实现

 <!DOCTYPE html>
 <html lang="zh">

     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Qing's Web</title>
         <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
         <style type="text/css">

             .moveBar {
                 position: absolute;
                 width: 250px;
                 height: 300px;
                 background: #666;
                 border: solid 1px #000;
                 margin: 50px;
                 left:200px;
                 top:200px;
             }

             #banner {
                 background: #52CCCC;
                 cursor: move;
             }
         </style>
     </head>

     <body >

         <div class="moveBar">
             <div id="banner">按住此处移动当前div</div>
             <div class="content">这里是其它内容</div>
         </div>

         <script>
             jQuery(document).ready(
                 function() {
                     $('#banner').mousedown(
                         function(event) {

                             $(".moveBar").css("margin","0px")

                             var isMove = true;
                             var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
                             var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
                             $(document).mousemove(function(event) {
                                 if(isMove) {
                                     var obj = $('.moveBar');
                                     obj.css({
                                         'left': event.pageX - abs_x,
                                         'top': event.pageY - abs_y
                                     });
                                 }
                             }).mouseup(
                                 function() {
                                     var obj = $('.moveBar');
                                     //还原样式，并获取
                                     obj.css({
                                         'left': $('div.moveBar').offset().left-50,
                                         'top': $('div.moveBar').offset().top-50
                                     });
                                     $(".moveBar").css("margin-left","50px")
                                     $(".moveBar").css("margin-top","50px")

                                     isMove = false;
                                 }
                             );
                         }
                     );
                 }
             );
         </script>
     </body>

 </html>

注： 不过还是有点遗憾的  如果这么做的话，会有晃动效果

可以进行一下修改

1.在鼠标进入"#banner"时，就修改margin属性

修改代码如下：

 <script>
             $("#banner").mouseenter(function(e) {
                 var obj = $('.moveBar');
                 obj.css("margin", "0px");
                 obj.css({
                     'left': $('div.moveBar').offset().left + 50,
                     'top': $('div.moveBar').offset().top + 50
                 });
             })
             $("#banner").mouseout(function() {
                 var obj = $('.moveBar');
                 //还原样式，并获取
                 obj.css({
                     'left': $('div.moveBar').offset().left - 50,
                     'top': $('div.moveBar').offset().top - 50
                 });
                 $(".moveBar").css("margin-left", "50px")
                 $(".moveBar").css("margin-top", "50px")
             })
             jQuery(document).ready(
                 function() {
                     $('#banner').mousedown(
                         function(event) {
                             /*$(".moveBar").css("margin","0px")*/
                             var isMove = true;
                             var abs_x;
                             var abs_y;
                              abs_x = event.pageX - $('div.moveBar').offset().left;
                              abs_y= event.pageY - $('div.moveBar').offset().top;
                             $(document).mousemove(function(event) {
                                 if(isMove) {
                                     var obj = $('.moveBar');
                                     obj.css({
                                         'left': event.pageX - abs_x,
                                         'top': event.pageY - abs_y
                                     });
                                 }
                             }).mouseup(
                                 function() {
                                     isMove = false;
                                 }
                             );
                         });
                 }
             );
         </script>

希望可以帮上需要的人，毕竟自己也是小白

对于更复杂的程序，我想也是这样的道理吧