你的位置:首页 > Java教程

[Java教程][可拖动DIV]刚开通博客顺便就写了点东西!


说说我自己的思路

首先需要一个初始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 >' + $("#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了,是不是很简单!也欢迎大家找出不足的地方!这是本人第一次写随笔。不喜勿喷,嘿嘿!

下面贴出全部代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title>可拖动DIV</title> 6   <script src="../js/jquery-1.9.1.min.js"></script> 7   <style> 8     div { 9       border: 1px #333 solid;10       width: 200px;11       height: 50px;12     }13 14     .td {15       border: 1px #333 solid;16       width: 200px;17       height: 50px;18     }19   </style>20 </head>21 <body>22   <div id="od">我是一个可拖动div</div>23 </body>24 </html>25 <script>26   $(document).ready(function () {27     $("#od").mousedown(function (e) {28       Mousetd(this, e);29     });30     $("body").mouseup(function () {31       $("body").unbind("mousemove");32       $(".td").bind("mousedown", function (e) {33         Mousetd(this, e);34       });35     });36     function Mousetd(obj, e) {37       var div_top = $(obj).offset().top;//div距离浏览器顶部的高度38       var div_left = $(obj).offset().left;//div距离浏览器左边的高度39       var mouse_top = e.clientY;//鼠标距离浏览器顶部的高度40       var mouse_left = e.pageX;//鼠标距离浏览器顶部的高度41       var mouse_divtop = mouse_top - div_top;//鼠标距离div顶部的高度42       var mouse_divleft = mouse_left - div_left;//鼠标距离div左边的高度43       $("body").bind("mousemove", function (e) {44         $("#od").hide();45         $(".td").remove();46         var html = '<div >' + $("#od").text() + '</div>';47         $("body").append(html);48         $(".td").css({ "margin-top": e.clientY - mouse_divtop, "margin-left": e.pageX - mouse_divleft });49       });50     }51   });52 </script>