说说我自己的思路

首先需要一个初始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. Lync边缘服务器配置

    以下步骤均使用Lync管理员权限即可完成 1.在前端下载并编辑拓扑,新建边缘池 如果边缘池中只有一台服务器,则池名称与服务器名称相同,如下: 如果需要删除边缘池,则需要先取消关联,如下: 2.发布拓扑 ...

  2. Android AndroidManifest 清单文件以及权限具体解释

    每一个Android应用都须要一个名为AndroidManifest.xml的程序清单文件,这个清单文件名称是固定的而且放在每一个Android应用的根文件夹下.它定义了该应用对于Android系统来 ...

  3. const和readonly差别

    我们都知道,const和static readonly的确非常像:通过类名而不是对象名进行訪问,在程序中仅仅读等等.在多数情况下能够混用.二者本质的差别在于,const的值是在编译期间确定的,因此仅仅 ...

  4. com.opensymphony.xwork2.ActionSupport类源码

    version : xwork-2.1.0 /* * Copyright (c) 2002-2006 by OpenSymphony * All rights reserved. */ package ...

  5. MySQL和PostgreSQL 导入数据对照

    在虚拟机上測评了下MySQL 和 PostgreSQL 的各种LOAD FILE方式以及时间. 由于是虚拟机上的測评,所以时间仅仅做參考,不要太较真, 看看就好了.MySQL 工具:    1. 自带 ...

  6. php.ini 中开启短标签 <?=$?>

    制参数: short_open_tag = On如果设置为Off,则不能正常解析类似于这样形式的php文件:<?phpinfo()?> 而只能解析<?phpphpinfo()?> ...

  7. iOS 常见知识点（三）：Lock

    iOS 常见知识点(一):Runtime iOS 常见知识点(二):RunLoop 锁是最常用的同步工具.一段代码段在同一个时间只能允许被有限个线程访问,比如一个线程 A 进入需要保护代码之前添加简单 ...

  8. [Oracle EBS R12]SQL Queries and Multi-Org Architecture in Release 12 (Doc ID 462383.1)

    In this Document   Abstract   History   Details   Previous Releases   Release 12   Multi-Org Session ...

  9. linux版本的区分

    linux每个版本有好几种方式,刚学习的时候还不明白,了解了一下终于知道了 如下,以CentOS为例 1.CentOS系统镜像有两个,安装系统只用到第一个镜像即CentOS-6.x-i386-bin- ...

  10. 关于git fetch 和git pull 的区别

    1.fetch 相当于是从远程获取最新版本呢到本地,不会自动merge. git fetch origin master:tmpgit diff tmp git merge tmp 2. git pu ...