javascript学习之jquery拖曳

一个简单的小拖曳用jquery几句代码就出来了：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>jquery拖曳</title>
 5 </head>
 6 <style>
 7     #div1{width:200px; height: 200px;background: #ccc;position: absolute;}
 8 </style>
 9 <script src="jquery-1.7.2.js"></script>
10 <script>
11     $(function(){
12         var oDiv = $("#div1");
13         oDiv.mousedown(function(ev){
14             var disX = ev.clientX - oDiv.position().left;
15             var disY = ev.clientY - oDiv.position().top;
16             function fnMove(ev){
17                 oDiv.css({
18                     left:ev.clientX - disX+'px',
19                     top:ev.clientY - disY+'px'
20                 });
21                 ev.preventDefault();
22             }
23             function fnUp(){
24                 $(document).unbind('mousemove',fnMove);
25                 $(document).unbind('mouseup',fnUp);
26             }
27             $(document).mousemove(fnMove);
28             $(document).mouseup(fnUp);
29         });
30     });
31 </script>
32 <body>
33 <div>
34     我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中<br>
35     我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中我不会被选中
36 </div>
37 <div id="div1"></div>
38 </body>
39 </html>

 

posted @ 2014-04-23 17:09  泡沫幻想  阅读(209)  评论(0)    收藏  举报