O'Reilly logo

PHP Ajax Cookbook by R. Rajesh Jeba Anbiah, Roshan Bhattarai, Milan Sedliak

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drag-and-drop functionality

Drag-and-drop functionality is a major feature of the modern Web. It is the ability to move objects around on the website. In this task, we will learn how to build a nice drag-and-drop layout using jQuery.sortable().

Getting ready

In the beginning, we will need to download the jQuery library with jQuery UI and include them before the closing the</body> tag:

<script src="js/jquery-1.4.4.js"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>

In this example, we will use a random image downloaded from the internet (with preferred dimensions of 200x80 pixels).

How to do it...

  1. When the jQuery library with jQuery UI is ready, we can start with HTML. We will build four main div elements: top, sidebar, sidebar2 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required