Using JQuery to Add Drag and Drop Support

Mohammad Azam · 2008-02-21

Drag and drop support in a web application always get some attention. I used drag and drop support in one of my applications and I have to admit that it involved a lot of JavaScript code. You can check out the article "Browser Compatible Drag and Drop Shopping Cart".

Today I had to create the same drag and drop approach so I decided to check out the drag and drop API's of the JQuery library. I have to admit that JQuery is one of the best JavaScript library that exists today. I can go on and on with the praise but let's take a look at the animation of the sample application.

The drag and drop operation is performed by the JQuery UI plug in which you can download here.

I will not be discussing the complete code over here since it is more suitable for an article. But here is the JavaScript code that makes it happen.

And here is the HTML:

    <asp:DataList ID="dlRooms" runat="server" RepeatColumns="3"
            RepeatDirection="Horizontal">
   
   
   
   


   
   

  •     <%# Eval("UserName") %>
       

    •    
       

  •     <%# Eval("RoomID") %>
       

    •   
       

  •     <%# Eval("Subject") %>
       

    •    
        

  •     <%# Eval("Description") %>
       

    •    
       

  •     <%# Eval("tblRoom.Name") %>
       

    •    
       

  •    
        <%# Eval("tblRoom.Description") %>
       
       

    •    
       

       
       
       
        </asp:DataList>

    JQuery is pretty darn exciting! Hopefully, you will see few articles on www.gridviewguy.com very soon!