最近做项目，碰到一个问题，需要对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>

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

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

HTML 通过js实现div的拖动效果的更多相关文章

  1. 纯js实现积木（div）拖动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js：简单的拖动效果

    效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...

  3. js实现div吸顶效果

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> < ...

  4. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  5. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  6. js 实现win7任务栏拖动效果

    前言 在某个时刻, 我认识了一个朋友. 此人在我的教唆下, 踏上了js的不归路. 前天他问我, Win7任务栏拖动效果怎么实现. 我随口就跟他说, 这简单的一逼. 在我一晚上的折腾之后, 一份潦草的代 ...

  7. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  8. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  9. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

随机推荐

  1. idea报错Target JRE version (1.8.0_191) does not match project JDK version (java version "1.7"), will use sources from JDK: 1.8

    使用mac的idea 启动项目,总是报一个问题 我在idea中添加了多个jdk,项目启动的时候就只是配置了一个正确的,项目的配置完全正确.但是配置好tomcat后,启动就会报这个错误. 解决方案:需要 ...

  2. 题目--统计一行文本的单词个数（PTA预习题）

    PTA预习题——统计一行文本的单词个数 7-1 统计一行文本的单词个数 (15 分) 本题目要求编写程序统计一行字符中单词的个数.所谓“单词”是指连续不含空格的字符串,各单词之间用空格分隔,空格数可以 ...

  3. audiounit错误码对应值查询

    https://www.osstatus.com/search/results?platform=all&framework=all&search=(错误码的值) EX:  https ...

  4. Python学习笔记1环境搭建

    1.在浏览器输入https://www.python.org/psf/,点击download下载python3.7.2(https://www.python.org/)   https://www.p ...

  5. swift 自动布局设置 tableview 的 tableHeaderView 的高度

    class headerView: UIView { var whiteView = UIView().then { $.backgroundColor = UIColor.red } overrid ...

  6. Echart遇到的问题：tooltip提示框大小异常

    将Echart图表放到项目中,发现当鼠标放到柱状图上时,提示框显示大小超出了div的大小. 官方的文档对于tooltip的说明也没有指出:如何修改大小. 那么tooltip是什么呢? fn+f12打开 ...

  7. windows -休眠

    查询服务器执行的睡眠状态 powercfg -a 开始休眠方法:手工键入如下命令: powercfg -hibernate on 命令执行之后立即就可以生效,无需要重新启动系统,再次执行“powerc ...

  8. The Swap

    源程序 swap.cpp* 输入文件 swap.in 输出文件 swap.out 时间限制 1s 空间限制 256MB [问题描述] Alice 得到了一个整数, 她将其视作长度为 n 的字符串 S. ...

  9. 在IIS上发布并运行ASP.NET Core

    英文原文地址:https://weblog.west-wind.com/posts/2016/Jun/06/Publishing-and-Running-ASPNET-Core-Application ...

  10. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...