說說我自己的思路 首先需要一個初始div 然後就是滑鼠事件，想象一下拖動這個過程需要用到哪些事件。。。 1、滑鼠按鈕按下事件mousedown 2、滑鼠按鈕鬆開事件mouseup 3、滑鼠移動事件mousemove 第一步：給div添加滑鼠按鈕按下事件，這個事件需要完成以下事情 一、獲取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 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>
