Geeks With Blogs

@azamsharp
  • azamsharp The WWDC app says that there are new videos but there is nothing under videos!!! about 437 days ago
  • azamsharp Can I post my opinion on iOS 7 Beta or is it under NDA or something? about 438 days ago
  • azamsharp iOS 7 BETA installed successfully! about 438 days ago
  • azamsharp iOS 7 BETA installed! Now restoring! I am on NET10 which uses AT&T network. Hopefully 3G will still work! Lets c.. about 438 days ago
  • azamsharp The missing of button borders in Xcode 5 makes it hard to determine the clickable area. about 438 days ago
  • azamsharp I might wait for iOS to be released before I can put it on my device! Don't want a bricked or unstable device! about 438 days ago
  • azamsharp Android has many features that no one uses, number of versions that no one upgrades to and thousands of apps that no one pays for. about 438 days ago
  • azamsharp Maybe it is just me but the new iOS 7 UI looks like Windows Phone 8 UI! #maybeIamCrazy about 438 days ago
  • azamsharp Anyone using H20 network upgraded to iOS 7 BETA Keep me updated if you face any problems. about 438 days ago
  • azamsharp @merowing_ You already downloaded it! I cannot even load the developer's website! :( about 438 days ago

AzamSharp Some day I will know everything. I hope that day never comes.

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.

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

Posted on Thursday, February 21, 2008 4:45 PM | Back to top


Comments on this post: Using JQuery to Add Drag and Drop Support

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
Nice work and a nice post, and i really appreciate ur efforts

can u provide us a sample code in c# :)
Left by Muhammad Moazzam Humayun on Mar 09, 2008 5:06 PM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
You can check out the complete article using the following URL:

http://www.gridviewguy.com/ArticleDetails.aspx?articleID=381_Drag_And_Drop_With_Persistence_Using_JQuery
Left by Mohammad Azam on Mar 10, 2008 9:21 AM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
Nice, but the sample code is only for .NET (3.5)

i was wondering for 2.0 :-)
Left by Muhammad Moazzam Humayun on Mar 16, 2008 10:40 PM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
Using jquery and document.getElementById???
Left by pihentagy on Jun 16, 2008 8:58 PM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
Great article, you've helped me cut a few corners, but I think you should spend a little more time on the jQuery library, reading over all the methods - everything you've done can be done JUST using jQuery, which would make your code easier to read and more manageable - just a thought. Great work :)
Left by kirk on Jun 20, 2008 4:18 PM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
I need to create a customizable story book.
In the middle of the page I have a DIV that represents the book page.
On the right side I have some characters, accessories and so on.
I want to drag'n'drop the elements into the book page and then get the coordinates of each object dropped into this div since then I want to save these coordinates for printing the book.
I also want if the user drag'n'drop the character outside the div move it to the original place.
Do you know of something similar to what I am looking for? Maybe a similar situation or solution?

Thanks in advance to all the community!
Pablo
Left by Pablo A on Jun 23, 2008 9:57 AM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
hi
i like you plugin. i have also some jquery drag and drop plugins.please see:-

http://jquery13.blogspot.com/2010/08/30-drag-and-drop-jquery-plugins.html

Thanks
Aman
Left by aman on Aug 13, 2010 1:31 AM

# re: Using JQuery to Add Drag and Drop Support
Requesting Gravatar...
Very nice article. Anyway, if you are interested in simple Drag and Drop table content functionality, then this page may be valuable for you.

http://www.redips.net/javascript/drag-and-drop-table-content/
Left by Darko Bunic | www.redips.net on Sep 17, 2010 7:53 PM

Your comment:
 (will show your gravatar)
 


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net | Join free