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:

  1. Add the following HTML code to recipe-6.html, creating a basic HTML page with three draggable elements in ...

Get jQuery 2.0 Development Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial