1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
5 <title>拖拽</title>
6 <style>
7 #drag{
8 position:absolute;
9 width:200px;
10 height:100px;
11 background-color:red;
12 }
13 </style>
14 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
15 <script type="text/javascript">
16 $(function(){
17
18 var is_drag=false;
19 var x=0;
20 var y=0;
21
22 $("#drag").mouseover(function(){$(this).css("cursor","move");});
23
24 $("#drag").mousedown(function(){
25 is_drag=true;
26 x=event.offsetX;
27 y=event.offsetY;
28 $(this).css("cursor","move");
29 });
30
31 $("#drag").mouseup(function(){is_drag=false;});
32
33 $(document).mousemove(function(){
34 if(!is_drag){return;}
35 $("#drag").css({"left":event.clientX-x,"top":event.clientY-y,"cursor":"move"});
36 });
37
38 });
39 </script>
40 </head>
41 <body>
42 <div id="drag"></div>
43 </body>
44 </html>
时间： 2024-10-17 09:13:09