Webpage Draggable Elements with jQuery

Draggable Menus in windows 8 cached many eyes and became the point of attraction with metro UI style. You could get the same effect of draggable elements with jquery in your website and it is very easy to implement.

So, Let’s get started

“If the shoes fit, wear it.” and same thing we are going to do. We will use jquery library and jquery UI by downloading both will not create our own jquery functions. Note that you could load these files by simply adding url of each page in your head tag as below and there will be no need of downloading.


<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>

Time to setup our markup


<h1>Drag demo not a Drag race</h1>
    <h1>Don't read, Just Drag</h1>
    <div class="grid grid-pad">
      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>

      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>

      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>

      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>

      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>

      <div id="box-1" class="icandrag">
        <div class="module">
        </div>
      </div>
    </div>

Here we have six blocks and all these six has a same class named as draggable to make CSS and jquery easy.

CSS to spice up the layout


body{
  background:url('../bg.jpg') no-repeat center center; 
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-attachment:fixed;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
[id*='box-'] {
  float: left;
  padding-right: 3%;
  padding-top:15px;
}
.grid-pad [id*='box-']:last-of-type {
  padding-right: 3%;
}
.module {
  background: #face0e;
  width: 100%;
  height: 180px;
}
.grid-pad {
  padding: 0px 0 15px 30px;
}
#box-1 {
  width: 16.6666%;
}
h1 {
  font-size: 2.5em;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
}

You could style your webpage as you want. Most of you going to style this webpage like metro UI to feel as windows developer.

The real magic

Well the final step to get the draggable elements. A simple javascript snippet at the end. Just note that these objects should be passed in name : value syntax that are contained without the curly brackets.




Function draggable is called for the class named icandrag. After that scroll is set to true that will eventually set our elements to scroll through the page. Try using false and you won’t be able to scroll infinitely.

Conclusion

Jquery team is doing well for web developers by providing such nice resources. Use of these resources can enhance and improve our workflow and jquery UI is a simple concept to get a draggable effect on a beautiful metro layout.


One thought on “Webpage Draggable Elements with jQuery

  1. It’s reаlly a greаt and useful piᥱce of information. I’m glad that you shared this uѕeful information witһ us.
    Please stay us informed likе this. Thank you for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *