A beautiful drag div instance based on jquery ui, jquerydiv
Today we will bring you a beautiful drag div instance based on jquery ui. This instance uses images as the background, and the div layer uses the ghost transparent effect. Div dragging is based on jquery ui. The interface is very beautiful. Let's take a look:
Download Online Preview source code
Implementation code.
Html code:
<div id="box1" class="box blurred-bg tinted">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: 100; } .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, reprint please indicate the original address: http://www.w2bc.com/Article/8713
I added a drag-and-drop event for a div, which was implemented using JQuery ui. How can I release this event?Release ?? Jquery ui is disabled
$ (Selector). draggable ("disable"); // disable the drag function.
$ (Selector). draggable ("enable"); // activate the drag function.
$ (Selector). draggable ("destory"); // Delete the drag Function
Javascript or JQUERY implements code for dragging the DIV Switch location.<Script type = "text/javascript">
$ (Function ()
{
$ ('# Rr1, # rr2, # rr3'). ligerDrag ();
$ ('# Rr1, # rr2, # rr3'). ligerResizable ();
});
</Script>
</Head>
<Body style = "padding: 100px">
<Div id = "rr1" style = "width: 200px; height: 300px; top: 130px; left: 200px; background: # A6DBD8; z-index: 1; position: absolute; "> </div>
<Div id = "rr2" style = "width: 200px; height: 300px; top: 30px; left: 340px; background: # AFCCF1; z-index: 2; position: absolute; ">
</Div>
<Div id = "rr3" style = "width: 200px; height: 200px; top: 150px; background: # DA9188; z-index: 3; position: absolute; "> </div>
<Div style = "display: none">
</Div>
This is written in jquery.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
