Creating a basic drag-and-drop functionality
It is possible to create interesting and intuitive interfaces by adding drag-and-drop elements to your site. jQuery UI comes with a built-in plugin for drag-and-drop interfaces. This recipe will show you how to create a basic drag-and-drop functionality without the use of any plugins, giving you the freedom and understanding to expand the code.
Getting ready
Create a blank HTML page called recipe-6.html with the recipe-6.css and recipe-6.js files in the same directory as the latest version of the jQuery library.
How to do it…
Carry out the following step-by-step instructions to complete this recipe:
Add the following HTML code to
recipe-6.html, creating a basic HTML page with threedraggableelements in a containerdiv:<!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 6</title> <link href="recipe-6.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <...
