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>
