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>