说说我自己的思路

首先需要一个初始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. ZOJ 3827 Information Entropy 水题

    Information Entropy Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/sh ...

  2. Effective C++ 第二版 17)operator=检查自己 18)接口完整 19)成员和友元函数

    条款17 在operator=中检查给自己赋值的情况 1 2 3 class  X { ... }; X a; a = a;  // a 赋值给自己 >赋值给自己make no sense, 但 ...

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

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

  4. hdu4759 Poker Shuffle 2013 ACM/ICPC Asia Regional Changchun Online

    找了很久的规律,只看十进制数字,各种乱七八糟的规律=没规律!看了别人的解题报告,虽然看懂了,可是怎么发现的这个规律呢T.T~想了很久很久~ 以下是转载的别人的图,自己再画太麻烦了~全部看出0~2n-1 ...

  5. 根据Android架构分层推荐开发书籍

    Android系统的架构可以分为六个部分.笔者根据自己的体会为大家推荐每个部分对应的精品书籍,不喜勿喷.  1.Android Application <Android Developer Do ...

  6. 征服 Nginx + Tomcat

    2年前一直折腾Apache,现如今更习惯Nginx. 搭建网站又遇到2年前遇到的问题——Session同步. (参考我以前的帖子——征服 Apache + Tomcat)只不过现今担当负载均衡的Apa ...

  7. Android 多点手势识别详解

    google 提供的API中,有个类,大家都很熟悉,GestureDetector.使用它,我们可以识别用户通常会用的手势.但是,这个类不支持多点触摸(可能 google认为没有人会在几个手指都在屏幕 ...

  8. GNU bash实现机制与源代码简析

    http://www.cnblogs.com/napoleon_liu/archive/2011/04/01/2001886.html http://blog.csdn.net/ruglcc/arti ...

  9. Maven学习小结(一 初探)

    1.下载Maven,解压并设置到环境变量中 https://maven.apache.org/download.cgi 需要先设置“JAVA_HOME”,否则报错: 之后查看Maven版本成功: 1. ...

  10. felx第二天 ActionScript 基本语法和关键字

    flex中使用的注解有两种分别是:// 和/**/ flex使用的关键字如图