Introduction:

Sometime back I visited a website that had the drag and drop shopping cart feature. Users can simply drag and drop the items they wish to buy in the basket and the basket is updated with the new results. I was extremely impressed with this feature and decided to create a small application that does the same. In this article I will implement a page which enables the users to drag and drop the items they wish to buy into the shopping basket. The shopping basket items and the price will be updated. The code presented in this article is browser compatible.

NOTE: Before reading this article I highly recommend reading the article Drag and Drop Using JavaScript.

The Database Design:

I used SQL SERVER 2005 Express to create a simple database called “ToyShopDatabase”. The database contains a single table “tblToys” which contains four columns.

ToyID: The identity column is used as a primary key.

Title: The title of the toy.

ImageUrl: The image url of the toy.

Price: The price of the toy.

I have populated the database with some dummy data. Let’s now see how we can display the data on the page.

Displaying Data on the Page:

I have used DataList control to display the data on the page. Check out the BindData method below which is used to retrieve the data from the database.

private void BindData()

    {

        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        SqlConnection myConnection = new SqlConnection(connectionString);

        SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM tblToys", myConnection);

        DataSet ds = new DataSet();

        ad.Fill(ds);

        dlToys.DataSource = ds;

        dlToys.DataBind();

    }

You can see the items displayed on the page in the screen shot below:

You can also see the shopping cart displayed on the left side of the screen. The shopping cart displays $0.00 since there are no products added to the cart.

The interesting thing is the HTML code for the DataList. Let’s check it out.

  <asp:DataList  Height="100%" Width="100%" ID="dlToys" runat="server" RepeatColumns="3" CellPadding="20" CellSpacing="20">

               <ItemTemplate>          

               <div ID="a" runat = "server" class="dragElement">

               <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Title") %>'  />

               <asp:Label ID="lblPrice" runat="server" Text = '<%# Eval("Price") %>' />

               <asp:Image ID="imgPicture" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />

               </div>         

                </ItemTemplate>              

                </asp:DataList>

As, you can see in the code above I have added a <DIV> element inside the ItemTemplate of the DataList control. This means that each product is contained inside the <DIV> element which will serve as a draggable object. The <DIV> control will have a unique ID since I have added the runat=”server” attribute. The unique ID will be assign by ASP.NET at runtime as shown below:

Making Elements Draggable:

At this point we know that our DIV elements will serve as the draggable objects. But there can be several DIV controls on the page which will not be a part of this drag and drop feature. We will use regular expression to filter the correct DIV elements.

<script>

var dragElementPattern = ".+_a$";

var divElements = document.getElementsByTagName("div");     

for(i=0;i<divElements.length;i++)

{  

    if(IsMatch(divElements[i].id, dragElementPattern))

    {           

        MakeElementDraggable(divElements[i]); 

    }