Using JQuery to Add Drag and Drop Support

February 21, 2008 · 1 min read

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!

    This article is part of the GWB Archives. Original Author: Mohammad Azam

    New on Geeks with Blogs

    • We Won The One Award I Actually Care About

      Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

    • Your Customers Build the Features Now

      I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

    • Get the Size of a Directory in Linux the Easy Way

      du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

    • Vim Search and Replace: The Ultimate Guide

      One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.