CSS implementation Drag effect

The effect is as follows, you can drag the slider, the number shows the distance from the left:

The code below, requires jquery and Jquery-ui library, please download from official website

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"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>0class="Box"> <divclass="Movebox"></div> </div></body>

CSS implementation Drag effect