A nice draggable div instance based on the jquery UI

Today we are going to bring you a nice draggable div instance that is based on the jquery UI. This example uses the image as the background, the DIV layer uses the ghost transparency effect. Div Drag is based on the jquery UI. The interface is very beautiful. Look together:

Online preview Source Download

The implemented code.

HTML code:

    <DivID= "Box1"class= "box BLURRED-BG tinted">        <H1>Blurred Background</H1>        <H2> by<ahref= "Http://www.w2bc.com">Ariona, Rian</a></H2>        <P>Drag This box to move around</P>    </Div>

CSS code:

Body{Background-image:URL ("normal.jpg");background-repeat:no-repeat;background-size:cover;background-attachment:fixed;font-family:Raleway, Open Sans, Droid Sans, roboto,arial, Sans-serif; }. BLURRED-BG{Background-image:URL ("blur.jpg");background-repeat:no-repeat;-moz-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;background-size:cover;background-attachment:fixed; }. blurred-bg.tinted{Background-image:-moz-linear-gradient (90deg, Rgba (255, 255, 255, 0.2), Rgba (255, 255, 255, 0.2)), url ("blur.jpg");Background-image:-webkit-linear-gradient (90deg, Rgba (255, 255, 255, 0.2), Rgba (255, 255, 255, 0.2)), url ("blur.jpg");Background-image:linear-gradient (0deg, Rgba (255, 255, 255, 0.2), Rgba (255, 255, 255, 0.2)), url ("https://lh3.googleusercontent.com/- M8txqmobg6c/u474ewu7y9i/aaaaaaaai2k/xkrgoiec1iu/s1600/blur.jpg "); }. blurred-bg.shaded{Background-image:-moz-linear-gradient (90deg, rgba (0, 0, 0, 0.2), Rgba (0, 0, 0, 0.2)), url ("blur.jpg");Background-image:-webkit-linear-gradient (90deg, rgba (0, 0, 0, 0.2), Rgba (0, 0, 0, 0.2)), url ("blur.jpg");Background-image:linear-gradient (0deg, rgba (0, 0, 0, 0.2), Rgba (0, 0, 0, 0.2)), url ("blur.jpg"); }. Box{width:500px;Height:300px; Left:-webkit-calc (50%-250px);Top:20%;position:Absolute;Border-radius:5px;-moz-box-shadow:0 20px 30px rgba (0, 0, 0, 0.6);-webkit-box-shadow:0 20px 30px rgba (0, 0, 0, 0.6);Box-shadow:0 20px 30px rgba (0, 0, 0, 0.6);Border:1px solid Rgba (255, 255, 255, 0.3);padding:20px;text-align:Center;-moz-box-sizing:Border-box;-webkit-box-sizing:Border-box;box-sizing:Border-box;Text-shadow:0 1px 1px rgba (0, 0, 0, 0.4); }. Box:active{cursor:Move; }H1, H2, A, p{Color: White;Font-weight: -; }. Tinted H1,. Tinted h2,. Tinted a,. Tinted P{Color:Black;Text-shadow:0 1px 1px rgba (255, 255, 255, 0.2); }H2{font-size:14px; }P{margin:20px; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/8713

A nice draggable div instance based on the jquery UI