第三十七节 jQuery之UI拖拽滑动条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color: gold;
11         }
12         .con{
13             width: 900px;
14             height: 200px;
15             margin: 50px auto 0;
16             border: 1px solid #000;
17         }
18     </style>
19     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
20     <script type="text/javascript" src="../jquery-ui.min.js"></script>
21     <script type="text/javascript">
22         $(function(){
23             $('.box').draggable({
24                 // axis:'x',  // 限制在x轴拖动
25                 
26                 containment:'parent',  // 限制在父级拖动
27 
28                 opacity:0.3,
29 
30                 drag:function(event,ui){
31                     // console.log(ui);
32                     // document.title = ui.position.left;
33                     $('#input01').val(ui.position.left);
34                 }
35 
36             })
37                 
38 
39         });
40     </script>
41 
42 </head>
43 <body>
44     <div class="con">
45         <div class="box"></div>
46 
47     </div>
48     <input type="text" name="" id="input01">
49 </body>
50 </html>