Css实现拖动效果

浏览数：20 / 时间：2015年06月09日

效果如下，可以拖动滑块，数字显示的是离左侧距离：

技术分享

代码如下，需要jquery和jquery-ui库，请从官网上下载

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
        *{ margin: 0;
            padding: 0;
        }
        body {
            width: 1110px;
            margin: 200px auto;
        }
         .box {
             width: 800px;
             height: 40px;
             border: 1px solid #696969;
             position: relative;
         }
        .movebox {
            width: 100px;
            height: 50px;
            background: #ccc;
            cursor: pointer;
            box-shadow: 0px 5px 5px darkblue;
            position: absolute;
            top: -5px;
        }
    </style>
    <script>
        $(function() {
            $(".movebox").draggable({
                axis: "x",
                containment: "parent",
                drag: function(evnet, ui){
                $("h1").text(ui.position.left);
        }
            });
        });
    </script>
</head>
<body>
    <h1>0</h1>
    <div class="box">
        <div class="movebox"></div>
    </div>
</body>
</html>