3、鼠標(biāo)移動(dòng)時(shí)，計(jì)算鼠標(biāo)移動(dòng)的距離，將這個(gè)距離更新到對(duì)象的位置，在我的代碼中，我試用絕對(duì)定位來表示對(duì)象的位置；
4、當(dāng)鼠標(biāo)移出對(duì)象或者鼠標(biāo)彈起的時(shí)候，則認(rèn)為對(duì)象處于不能移動(dòng)的狀態(tài)。這個(gè)在我的代碼中使用一個(gè)bool類型的變量isMouseDown表示，當(dāng)這個(gè)變量為true的時(shí)候，則說明對(duì)象處于可移動(dòng)狀態(tài)，如果為false的時(shí)候，表示對(duì)象處于不可移動(dòng)狀態(tài)。鼠標(biāo)移出對(duì)象或者彈出的時(shí)候，就將isMouseDown置為false。
注：依照樓下的建議調(diào)整了一下代碼，基本上兼容瀏覽器，但是鼠標(biāo)移動(dòng)太快的時(shí)候就會(huì)出現(xiàn)不能移動(dòng)，這一點(diǎn)如果有哪位大俠知道的話還請(qǐng)指點(diǎn)一下
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www./1999/xhtml" >
3 <head>
4 <title>使用鼠標(biāo)拖動(dòng)層代碼</title>
5 <style type="text/css">
6 #Main
7 {
8 width:400px;
9 height:400px;
10 position:absolute;
11 top:10px;
12 left:0;
13 border:1px solid #CCC;
14 border-radius:5px;
15 background-color:Green;
16 }
17 h3
18 {
19 margin:0;
20 width:400px;
21 height:40px;
22 background-color:Gray;
23 cursor:move;
24 line-height:40px;
25 border-radius:5px 5px 0 0;
26 }
27 </style>
28 <script type="text/javascript" src="http://code./jquery-1.8.3.min.js"></script>
29 <script type="text/javascript">
30 //注冊(cè)一個(gè)Jquery的鼠標(biāo)拖動(dòng)函數(shù),參數(shù)為要拖動(dòng)的對(duì)象
31 $.fn.extend({ SliderObject: function (objMoved) {
32 var mouseDownPosiX;
33 var mouseDownPosiY;
34 var InitPositionX;
35 var InitPositionY;
36 var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
37 $(this).mousedown(function (e) {
38 //當(dāng)鼠標(biāo)按下時(shí)捕獲鼠標(biāo)位置以及對(duì)象的當(dāng)前位置
39 mouseDownPosiX = e.pageX;
40 mouseDownPosiY = e.pageY;
41
42 InitPositionX = obj.css("left").replace("px", "");
43 InitPositionY = obj.css("top").replace("px", "");
44 obj.mousemove(function (e) {//這個(gè)地方改成$(document).mousemove貌似可以避免因鼠標(biāo)移動(dòng)太快而失去焦點(diǎn)的問題
45 //貌似只有IE支持這個(gè)判斷，Chrome和Firefox還沒想到好的辦法
46 //if ($(this).is(":focus")) {
47 var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX);
48 var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY);
49 obj.css("left", tempX + "px").css("top", tempY + "px");
50 //};
51 //當(dāng)鼠標(biāo)彈起或者離開元素時(shí)，將鼠標(biāo)彈起置為false，不移動(dòng)對(duì)象
52 }).mouseup(function () {
53 obj.unbind("mousemove");
54 }).mouseleave(function () {
55 obj.unbind("mousemove");
56 });
57 })
58 }
59 });
60 $(document).ready(function () {
61 $("h3").SliderObject($("#Main"));
62 })
63 </script>
64 </head>
65 <body>
66 <div id="Main">
67 <h3>鼠標(biāo)放在這里拖動(dòng)我</h3>
68 <div id="Container">可以使用鼠標(biāo)拖動(dòng)的層</div>
69 </div>
70 </body>
71 </html>
