Close this search box.

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">

 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()


And here is the HTML:

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

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

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

Related Posts