Jqueryで書かれたマウスドラッグ効果
23020 ワード
近日のプロジェクトの中で1つのマウスのドラッグ&ドロップの効果をしなければならなくて、そこで手动的にJqueryを使って1つして、みんなと分かち合って、そして达人の指点を得ることができることを望んで、もしどの大侠が私の考えとコードが正しくないと感じてあるいは改善する必要があるならば、1、2を指点して、下で感谢しきれません.
私の考えはこうです.
1、マウスを押したとき、マウスの現在位置をキャプチャする.
2、移動対象の現在位置情報を取得する.
3、マウスが移动する时、マウスが移动する距离を计算して、この距离をオブジェクトの位置に更新して、私のコードの中で、私は绝対的な位置を试みてオブジェクトの位置を表します;
4、マウスがオブジェクトを移動したり、マウスが跳ね上がったりすると、オブジェクトが移動できない状態になると考えられます.これは私のコードでboolタイプの変数isMouseDownで表され、この変数がtrueの場合、オブジェクトは移動可能な状態にあり、falseの場合、オブジェクトは移動不可能な状態にあることを示します.マウスでオブジェクトを移動したり、イジェクトしたりすると、isMouseDownをfalseにします.
はい、考え方はこのようにして、次はコードを貼って、もし私の考えの中で表現がはっきりしないならば、コードの中で見ることができます:
注意:下の階の提案に従ってコードを調整して、基本的にブラウザと互換性がありますが、マウスの移動が速すぎると移動できないことがあります.
私の考えはこうです.
1、マウスを押したとき、マウスの現在位置をキャプチャする.
2、移動対象の現在位置情報を取得する.
3、マウスが移动する时、マウスが移动する距离を计算して、この距离をオブジェクトの位置に更新して、私のコードの中で、私は绝対的な位置を试みてオブジェクトの位置を表します;
4、マウスがオブジェクトを移動したり、マウスが跳ね上がったりすると、オブジェクトが移動できない状態になると考えられます.これは私のコードでboolタイプの変数isMouseDownで表され、この変数がtrueの場合、オブジェクトは移動可能な状態にあり、falseの場合、オブジェクトは移動不可能な状態にあることを示します.マウスでオブジェクトを移動したり、イジェクトしたりすると、isMouseDownをfalseにします.
はい、考え方はこのようにして、次はコードを貼って、もし私の考えの中で表現がはっきりしないならば、コードの中で見ることができます:
注意:下の階の提案に従ってコードを調整して、基本的にブラウザと互換性がありますが、マウスの移動が速すぎると移動できないことがあります.
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 <title> </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.com/jquery-1.8.3.min.js"></script>
29 <script type="text/javascript">
30 // Jquery ,
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 //
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) {// $(document).mousemove
45 // IE ，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 // ， false，
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> </h3>
68 <div id="Container"> </div>
69 </div>
70 </body>
71 </html>