js拖拽 jquery实现 

 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>
View Code

 

posted @ 2014-10-10 17:26  kim_berley  阅读(139)  评论(0)    收藏  举报