js拖拽 jquery实现

浏览数：42 / 时间：2015年06月09日 
 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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style java src html com log Go http class style java src html com log Go http

相关文章

随机文章

您可能还喜欢

您可能还喜欢