说说我自己的思路

首先需要一个初始div

 div {

            border: 1px #333 solid;

            width: 200px;

            height: 50px;

        }
<div id="od">我是一个可拖动div</div>

然后就是鼠标事件，想象一下拖动这个过程需要用到哪些事件。。。

1、鼠标按钮按下事件mousedown

2、鼠标按钮松开事件mouseup

3、鼠标移动事件mousemove

第一步：给div添加鼠标按钮按下事件，这个事件需要完成以下事情

一、获取div到浏览器顶部和左边的距离

二、获取鼠标到浏览器顶部和左边的距离

三、计算出鼠标到div顶部和左边的距离（这里不知道有没有可以直接获取鼠标到div顶部和左边的距离的方法,有兴趣的可以去找一下）

  　　　　　 var div_top = $(obj).offset().top;//div距离浏览器顶部的高度

            var div_left = $(obj).offset().left;//div距离浏览器左边的高度

            var mouse_top = e.clientY;//鼠标距离浏览器顶部的高度

            var mouse_left = e.pageX;//鼠标距离浏览器顶部的高度

            var mouse_divtop = mouse_top - div_top;//鼠标距离div顶部的高度

            var mouse_divleft = mouse_left - div_left;//鼠标距离div左边的高度

四、给Body添加鼠标移动事件（body就是鼠标移动的一个区域，这个可以根据需求做修改），该事件需要完成以下事情

1、隐藏初始div

2、删除新创建的div

3、在body上创建新的div

$("body").bind("mousemove", function (e) {

                $("#od").hide();

                $(".td").remove();

                var html = '<div class="td">' + $("#od").text() + '</div>';

                $("body").append(html);

                $(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });

            });

第二步：给Body添加鼠标按钮松开事件，这个事件需要完成以下事情

一、删除Body绑定的鼠标移动事件

二、给新创建的div绑定鼠标按钮按下事件，这个事件要完成的操作就和第一步的第四点一样

 $("body").unbind("mousemove");

            $(".td").bind("mousedown", function (e) {

            });

这样就OK了，是不是很简单！也欢迎大家找出不足的地方！这是本人第一次写随笔。不喜勿喷，嘿嘿！

下面贴出全部代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>可拖动DIV</title>

     <script src="../js/jquery-1.9.1.min.js"></script>

     <style>

         div {

             border: 1px #333 solid;

             width: 200px;

             height: 50px;

         }

         .td {

             border: 1px #333 solid;

             width: 200px;

             height: 50px;

         }

     </style>

 </head>

 <body>

     <div id="od">我是一个可拖动div</div>

 </body>

 </html>

 <script>

     $(document).ready(function () {

         $("#od").mousedown(function (e) {

             Mousetd(this, e);

         });

         $("body").mouseup(function () {

             $("body").unbind("mousemove");

             $(".td").bind("mousedown", function (e) {

                 Mousetd(this, e);

             });

         });

         function Mousetd(obj, e) {

             var div_top = $(obj).offset().top;//div距离浏览器顶部的高度

             var div_left = $(obj).offset().left;//div距离浏览器左边的高度

             var mouse_top = e.clientY;//鼠标距离浏览器顶部的高度

             var mouse_left = e.pageX;//鼠标距离浏览器顶部的高度

             var mouse_divtop = mouse_top - div_top;//鼠标距离div顶部的高度

             var mouse_divleft = mouse_left - div_left;//鼠标距离div左边的高度

             $("body").bind("mousemove", function (e) {

                 $("#od").hide();

                 $(".td").remove();

                 var html = '<div class="td">' + $("#od").text() + '</div>';

                 $("body").append(html);

                 $(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });

             });

         }

     });

 </script>

[可拖动DIV]刚开通博客顺便就写了点东西！的更多相关文章

  1. 开通博客第一天 写一个hello world

    申请的博客第一天便被批准了,有了一个和大家交流学习的园地.在今后的日子里期待一起进步.

  2. hello word！------为什么开通博客以及自我介绍

    来北京已经一年半的日子了,已经完全成功熟练的成为了另一个我,没有了半年前刚来时的那种焦虑.急躁和格格不入. 回想起来那段时间,大概是我人生中非常重要的时期了,去年那个夏天,只身一人背上行囊踏上了北上的 ...

  3. 开通博客啦 Let‘s Go！

    入园两年半,在博客园学到很多知识.得到了很大帮助,今天终于开通博客啦,准备将自己所学到的有用知识分享给大家,共同学习共同进步.

  4. 我在CSDN开通博客啦！

    今天,我最终在CSDN开通博客啦! 

  5. 开通博客第一天，记录此时此刻，开始学习加强c#

    从2017年6月毕业到现在,不断的学习.net,在工作中不断的加强技术,终于在此时此刻决定开通博客,记录此后每一天学习的技术点,两年来,每天所涉及的技术点很杂,学了这个忘了那个,总感觉在进步却总是觉得 ...

  6. 在CSDN开通博客专栏后如何发布文章（图文）

    今天打开电脑登上CSDN发现自己授予了专栏勋章,有必要了解如何在专栏发布文章. 很感谢已经有前辈给出了图文教程,此文章转载自博客:http://blog.csdn.net/upi2u/article/ ...

  7. 使用开源文档工具docsify，用写博客的姿势写文档

    前提 下面的简介摘抄自docsify的官网 https://docsify.js.org 中的简介 docsify是一个神奇的文档网站生成器.他可以快速帮你生成文档网站.不同于GitBook.Hexo ...

  8. 第一次写博客，就写如何向外行介绍自己做的是什么，那个我是做web的

    如果想外行问你是做什么的,改如何回答.和内行说java后台就可以了,但外行听不懂,我们该如何描述呢? 我的方法是:我做的是java web开发,不是内外的外,是个英文单词web,全名叫world wi ...

  9. 第一天开通博客，就粗略写一下刚了解TCP/IP协议工作过程

    Tcp/Ip协议分为四层:底层到高层顺序 链路层(硬件,网卡这些) 网络层(选择一条传输路径,如何从一台计算机请求另一条计算机) 传输层(遵循TCP(传输控制协议),UDP(用户数距协议)这些协议) ...

随机推荐

  1. orderby group by

    说到SQL语句,大家最開始想到的就是他的查询语句: select* from tableName: 这是最简单的一种查询方式,不带有不论什么的条件. 当然在我们的实际应用中,这条语句也是非经常常使用到 ...

  2. C#-获取datagriview选中行中某一列的值

    获取选中行中某一列的值: int index = dg_Product.CurrentRow.Index; //取得选中行的索引 txt_ProductId.Text = dg_Product.Row ...

  3. JNI/NDK开发指南（四）——字符串处理

    转载请注明出处:http://blog.csdn.net/xyang81/article/details/42066665 从第三章中能够看出JNI中的基本类型和Java中的基本类型都是一一相应的,接 ...

  4. [MODx] 9. Real Example

    Snippet code: <?php $path = MODX_CORE_PATH . 'components/storefinder/'; $result = $modx->addPa ...

  5. 开源PaaS产品介绍

    简介 本文主要介绍一下PaaS领域两个著名的开源软件: Cloud Foundry和OpenShift. [广告]如果你喜欢本博客,请点此查看本博客所有文章:http://www.cnblogs.co ...

  6. 一、 Socket之UDP异步传输文件

    用SCOKET 发送文件是一个不太好处理的问题,网上的例子也都是很简单的,我准备写一个比较完善的例子,这个就算是开始吧,以后的都会在这个例子的基础上进行修改,准备实现多线程传输.断点传输和文件传输的完 ...

  7. jQuery中要注意的一些函数

    has()方法 或 :has选择器 :是过滤子类含有的,并不是过滤当前选择器选择的元素或对象含有的

  8. NSURLSession 请求

    参考网站:http://ningandjiao.iteye.com/blog/2010753 http://www.cocoachina.com/industry/20131106/7304.html ...

  9. json与jsonp区别浅析（json才是目的，jsonp只是手段）

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  10. 关于Comparator和Comparable

    1.Comparable 2.Comparator  >>>>>> Comparable & Comparator 都是用来实现集合中元素的比较.排序的,只 ...