Thursday, June 25, 2009

Drag and Drop with Persistence using JQuery

Introduction

Ever been on a Web site that shows off the drag and drop operation? Maybe it allows you to drag and drop the product into a shopping cart. Most of us have been there and were really impressed with the feature. In this article, we will focus on how to create a similar drag and drop functionality to add users to a room.

Why JQuery?

Why indeed? There are several drag and drop libraries available for free. Take Microsoft ASP.NET Ajax, for example. Unfortunately, the Microsoft Ajax Library is not developer friendly, meaning it is darn complicated to use. So, if you are looking for some head-banging, be sure to dive into Microsoft Ajax. However, if you are interested in a simple and powerful approach, then JQuery is your friend.

Some of you might be thinking, "Why not simply write plain old vanilla JavaScript?" Well, off course you can, but that is also a very complicated and time-consuming approach. If you are interested in using only JavaScript, then check out the article, "Browser Compatible Drag and Drop Shopping Cart".

Downloading JQuery and UI API

Before we implement anything, we need to download the JQuery library and the JQuery drag and drop UI API. Check out the following links for download:

  1. JQuery Library
  2. JQuery Drag and Drop UI API

Scenario

The scenario is a little different from the shopping cart basket. In this application, we are going to drag and drop the users to a room. Once a user is inserted into the room, an entry is written to the database. We can also delete the user from the room. In that case, the entry is deleted from the database. Check out the GIF using the link, "Drag and Drop With Persistence Using JQuery".

Database

There is one table, tblRoomSessions, that will hold the information about the user and the room. The diagram of the tblRoomSessions table is shown below:

gridviewguy_jquerydd1.JPG

The table script is included with the download.

Populating the Students List

There are multiple ways of populating the student DataList control. You can use a simple DataSet container, fill it up with the data from tblRoomSession and assign it to the DataList control. I have used a different approach, but it really does not matter how you populate the DataList.

Student DataList Control ASPX Code

The ASPX code for the DataList control is pretty straightforward. Check out the code below:

See full detail: http://www.codeproject.com/KB/webforms/JQueryPersistantDragDrop.aspx

No comments: