Book Image

PHP Ajax Cookbook

Book Image

PHP Ajax Cookbook

Overview of this book

Table of Contents (16 chapters)
PHP Ajax Cookbook
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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...