[可拖动DIV]刚开通博客顺便就写了点东西！

时间：2024-05-01 08:07:14

说说我自己的思路

首先需要一个初始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>

相关文章