说说我自己的思路
首先需要一个初始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了，是不是很简单！也欢迎大家找出不足的地方！这是本人第一次写随笔。不喜勿喷，嘿嘿！
下面贴出全部代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="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 class="td">‘ + $("#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>
时间： 2024-12-10 18:22:46