Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Drag and Drop DIV Example Code in Asp.NET

Sep 25, 2012
Introduction

Here I will explain how to implement simple drag and drop div example using JQuery in asp.net.

Description:
  
In previous posts I explained split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to
JQuery. Now I will explain how implement simple div with drag and drop options in JQuery.

To implement drag and droppable div in JavaScript we need to write much code but in JQuery we can achieve this functionality just by simple properties draggable and droppable that would be like as shown below


<script type="text/javascript">
$(document).ready(function() {
$("#dragdiv").draggable();
$("#dropdiv").droppable({
drop: function() {
alert('dropped');
}
});
});
</script>
If you observe above script I used one div as draggable and another div with droppable. If you want check this code in sample check below code

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Simple jquery drag and drop div example</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dragdiv").draggable();
$("#dropdiv").droppable({
drop: function() {
$(this)
.addClass("highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>

<style type="text/css">
#dragdiv { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#dropdiv { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.content {
background: scroll 50% 50% #FFFFFF;
border: 1px solid #AAAAAA;
color: #222222;
}
.header {
background: scroll 50% 50% #CCCCCC;
border: 1px solid #AAAAAA;
color: #222222;
font-weight: bold;
}
.highlight {
background: scroll 50% top #EB5E00;
border: 1px solid #FED22F;
color: #fff;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div id="dragdiv" class="content">
<p>Drag me to my target</p>
</div>
<div id="dropdiv" class="header">
<p>Drop here</p>
</div>
</div>
</form>
</body>
</html>
Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

5 comments :

Anonymous said...

gudddd.........

Unknown said...

not bad......................

Larus Cachinnans said...

Very nice, thanks..

Anonymous said...

Poor.. Any Body can do it... Do a validation

Anonymous said...

i tried this, but my dragging div placed behind the main div........how to make it visible

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.