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, and mainContent. Each of them includes a sortable list:

   <div id="page">
   <div id="top">
     <ul class="sortable">
       <li id="news"><h2>News</h2></li>
       <li id="about">&lt...