There are so many various plugins and scripts to use for making draggable elements. Some of them allow you to create upload forms or dynamically sorted webpage tables. However, what about just creating some very basic functionality to give users the ability for dragging items through the page? The jQuery UI Draggable feature has all of this and it is very simple to add into your website.
I want to demonstrate how using a very simple jQuery UI script will allow for any objects to be dragged along the page. Since this is all built into jQuery we have the ability to use callback functions, which are sort of like unique JS codes we write whenever a user drags or drops an item. There are so many different examples on the jQuery UI website that you should definitely go and check out. I am not using anything overly complex, but you can also see my live demo or download the source codes from the links below.
Live Demo – Download Source Code
Getting Started
First you should download a local copy of the jQuery library and jQuery UI. Both of them are free open source downloads which come minified right from the website. I will also be using a couple Google Web Fonts to spice up the layout design. We need to include a sample UI theme which is compatible with other features like dialog windows.
The most common theme is Smoothness which can be hosted externally by Google. However I have downloaded a copy and used this with my own sample demo.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Draggable jQuery Elements Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Cherry+Swash:400,700">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
I do not feel the theme should matter all that much. But just keep in mind that jQuery UI does require a theme for a number of features. The website has a Themeroller app which allows you to build a custom design and export the contents. Although admittedly this is not a necessity and may prove to be more of a distraction.
<div id="icons">
<img src="images/crown.png" id="crownicon" class="draggable" alt="royal crown">
<img src="images/compass.png" id="compassicon" class="draggable" alt="compass">
<img src="images/globe.png" id="globeicon" class="draggable" alt="globe planet">
<img src="images/scroll.png" id="scrollicon" class="draggable" alt="paper scroll">
</div>
The internal #icons div will contain each of the movable elements. I am not targeting the ID as a movable container, but instead each individual item has a class name of .draggable. This will make it all too easy for targeting individual elements with specific parameters(if we need them). Useful parameters like axis and containment will force items to stay within page boundaries no matter where the user moves them.
CSS Webpage Styles
Admittedly I am not using too many excess CSS styles other than typical resets. The internal HTML is very basic, and since we are using draggable elements to go anywhere on the page it would make sense that all of this functionality is handled through JavaScript.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body {
background: #f4f4f4 url('../images/subtle_grunge.png'); /* http://subtlepatterns.com/subtle-grunge/ */
font-size: 62.5%;
line-height: 1;
padding-top: 55px;
}
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
You can expect a majority of these resets are common along with my other tutorials. I am using a subtle grunge background to revamp the layout styles. I am keeping a lot of the reset codes similar to Eric Meyer’s resets. Most web developers will agree that his common template may be used as a foundation for almost any website design.
h1 {
font-family: 'Cherry Swash', 'Helvetica Neue', Arial, sans-serif;
font-size: 4.5em;
font-weight: bold;
letter-spacing: 0.05em;
margin-bottom: 12px;
color: #6c6e71;
text-align: center;
text-shadow: 1px 1px 0 rgba(255,255,255,0.55);
}
p {
font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
font-size: 1.3em;
line-height: 1.2em;
margin-bottom: 7px;
color: #434343;
text-align: center;
}
a { color: #5e80c6; }
a:hover { color: #84a3e1; }
#w {
display: block;
width: 850px;
margin: 0 auto;
}
#icons {
display: block;
padding-top: 30px;
text-align: center;
}
All of the other generic page typography is using a set of new styles from the browser defaults. I like the Google Cherry Swash font which I’ve added onto the header text. Also the #icons div is used like a center container, and I am using some top padding for extra space on the page.
Dragging with jQuery
Now we can get onto the final steps for making these page elements move. I am only using a couple parameters which are typical of the jQuery UI .draggable() function. These objects should be passed in name:value syntax, contained inside curly brackets like you would expect from other similar JavaScript methods.
$(function(){
$('.draggable').draggable({ scroll: true, cursor: "move"});
});
Since this is just 3 lines of code I simply copied this into the bottom section of my index.html file. As you would need more codes it would be smart to move things into a separate JavaScript file and include this into the header. You may notice the scroll parameter is simple to edit and of course easy to change in the future. I like customizing the cursor while a user is dragging, but this is entirely optional. You should add some other parameters into the mix and see what you can make with this basic demo sample.
Live Demo – Download Source Code
Final Thoughts
jQuery UI is an excellent resource for web developers. The team has been hard at work to create a usable library for all of these common interface features. Dragging items has become a popular choice for user profiles and dynamic webpages. You just need to spend a bit of time brainstorming the functionality and how you want it to work.
But I do hope that my sample demo can provide an excellent starting point. It will never be super easy but with practice I guarantee that anybody can get started using jQuery UI. Although my example is fairly rudimentary you should feel free to download a copy of the codes and toy around on your own. Additionally if you have other questions or resources for draggable webpage elements, feel free to share with us in the post discussion area below.
Source: http://designm.ag/tutorials/making-draggable-webpage-elements-jqueryui/
No comments:
Post a Comment