Using JQuery to Add Drag and Drop Support

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

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.

<script language="javascript" type="text/javascript">


$(document).ready(function(){
 
    $(".block").draggable({helper:'clone'}); 
       
    $(".drop").droppable({
 accept: ".block",
 activeClass: 'droppable-active',
 hoverClass: 'droppable-hover',
 drop: function(ev, ui) {
 
 document.getElementById("display").innerHTML =  $(ui.draggable).children("li:first").text();
 
 var lid = ($(ui.draggable).children("li:first"));
  
 var removeLink = document.createElement("a");
 removeLink.innerHTML = "remove";
 removeLink.href = "#";
 removeLink.onclick = function()
 {    
      $("#drop1").children().remove("#"+lid[0].id);
      $(this).remove();      
 }
  
 $(this).append($(ui.draggable).clone().children("li:first").addClass("blocker"));  
 $(this).append(removeLink);
 
 }
});
 
  });


</script>

And here is the HTML:

    <asp:DataList ID="dlRooms" runat="server" RepeatColumns="3"
            RepeatDirection="Horizontal">
   
    <ItemTemplate>
   
    <div id="div1" class="block">
   
    <li id="username" runat="server">
    <%# Eval("UserName") %>
    </li>
   
    <li id="roomId" runat="server">
    <%# Eval("RoomID") %>
    </li>
  
    <li>
    <%# Eval("Subject") %>
    </li>
   
     <li>
    <%# Eval("Description") %>
    </li>
   
    <li>
    <%# Eval("tblRoom.Name") %>
    </li>
   
    <li>
   
    <%# Eval("tblRoom.Description") %>
   
    </li>
   
    </div>
   
    </ItemTemplate>
   
    </asp:DataList>

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