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 Draggable and Resizable Div Example/Tutorial in Asp.Net

Sep 25, 2012
Introduction

Here I will explain how to implement JQuery draggable and resizable example in
asp.net.

Description:
  
In previous posts I explained JQuery drag and drop div example, Best JQuery AutoComplete plugin examples,
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 draggable and resizable options in JQuery.

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


<script type="text/javascript">
$(document).ready(function() {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
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>jquery draggable and resizable 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>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />

<style type="text/css">
#resizediv { width: 150px; height: 150px; padding: 0.5em;background:#EB5E00;color:#fff }
</style>

<script type="text/javascript">
$(document).ready(function() {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="resizediv">
Move... or Resize....<br />Aspdotnet-Suresh .com</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

10 comments :

rams said...

excellent sir......

John Bhatt said...

Hi Suresh,
I read almost all blogs by you and also Subscribed using mail. Great Tips and Great sharing of Code. Thanks for this support to Beginners.

Anonymous said...

Dear Suresh,
you are none other than 'E-Guru' for beginners in programming,like me..Looking forward to learn more informations from you...

Pran said...

How to use Div element when it is in masterpage

Anonymous said...

Nice article sir.Now the div alone is getting resized.i want also to resize div contents. how to do it. kindly post an article on it.thanks in advance sir.

Anonymous said...

LOL, don't see any asp .net in your code friend =)
only html, js that are (fortunately) not microsoft technologies

Anonymous said...

i have grown up in the lap of asp.net suresh site. thanx suresh keep posting the articles

maddy said...

Helpful..exactly same looking for..

mvc4beginner said...

Does this have any browser specific restrictions ? version ?

Unknown said...

Asp r php after running everyting is html only

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.