设置拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.box').draggable({
                // axis:'x',/*限制在x轴拖动*/
                containment:'parent',/*限制在父级的框里拖动*/
                drag:function (ev, ui) {
                    console.log(ui);
                    var num=$('.box').offset().left;
                    document.title=num;
                    $('.box02').val(num);
                }
            });/*这样盒子就能拖动了*/

        })
    </script>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .con{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            margin: 50px auto 0;
            position: relative;
        }
        .box02{
            height: 200px;
            width: 50px;
            /*background-color: #7aa1ef;*/
            position: absolute;
            left: 820px;
            top: 0;
        }
    </style>
</head>
<body>
<ul>
    <div class="con">
        <div class="box"></div>
        <input type="text" name="" class="box02">
    </div>


</ul>

</body>
</html>
效果如图
设置拖拽效果