说说我自己的思路

首先需要一个初始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. NSMutableAttributedString iOS 在UILabel显示不同的字体和颜色(转)

    在项目开发中,我们经常会遇到在这样一种情形:在一个UILabel 使用不同的颜色或不同的字体来体现字符串,在iOS 以后我们可以很轻松的实现这一点,官方的API 为我们提供了UILabel类的attr ...

  2. Jfinal极速开发微信系列教程（一）--------------Jfinal_weixin demo的使用分析

    概述: Jfinal_weixin已经出了有好一段时间了!一直在关注当中......最近工作上有需要到这个东西,所以,话了两个小时来看看这个东西,看完demo以后,豁然开朗,原理微信和一般的web项目 ...

  3. 【iOS知识学习】_iOS动态改变TableView Cell高度

    在做tableView的时候,我们有时候须要依据cell的高度动态来调整.近期在网上看到一段代码不错.跟大家Share一下. 在 -(UITableViewCell *)tableView:(UITa ...

  4. linux内核系统调用和标准C库函数的关系分析

    http://blog.csdn.net/skyflying2012/article/details/10044343

  5. 面试题总结之Linux/Shell

    Linux Linux cshrc文件作用 Linux如何起进程/查看进程/杀进程 Linux 文件755 代表什么权限 Linux辅助线程 Linux进程间通信方法 pipeline,msgq... ...

  6. Android屏幕分辨率详解（VGA、HVGA、QVGA、WVGA、WQVGA）

    这些术语都是指屏幕的分辨率. VGA:Video Graphics Array,即:显示绘图矩阵,相当于640×480 像素: HVGA:Half-size VGA:即:VGA的一半,分辨率为480× ...

  7. keyStore vs trustStore--转载

    原文:http://lukejin.iteye.com/blog/605634 今天有同事向我问起这两个概念,所以我就记录下.首先我们得澄清一些概念.一个web应用如果需要提供以https的方式访问的 ...

  8. 聊聊 iOS 开发中的协议

    前言 何为协议,简单来说在OC中我们使用关键字@protocol可以声明一个协议,并在协议中添加多个属性.方法供于遵循者实现,从某个角度上来说,这是一种不同于category机制的category.在 ...

  9. ADO.Net 之 数据库连接池（一）

    1. 什么是连接池? 我们都知道,建立一个数据库连接是一件非常耗时(消耗时间)耗力(消耗资源)的事情.之所以会这样,是因为连接到数据库服务器需要经历几个漫长的过程:建立物理通道(例如套接字或命名管道) ...

  10. Flex学习第一天(两个数相加)

    <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...