Introduction:
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.
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 Email
|
|||
10 comments :
excellent sir......
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.
Dear Suresh,
you are none other than 'E-Guru' for beginners in programming,like me..Looking forward to learn more informations from you...
How to use Div element when it is in masterpage
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.
LOL, don't see any asp .net in your code friend =)
only html, js that are (fortunately) not microsoft technologies
i have grown up in the lap of asp.net suresh site. thanx suresh keep posting the articles
Helpful..exactly same looking for..
Does this have any browser specific restrictions ? version ?
Asp r php after running everyting is html only
Note: Only a member of this blog may post a comment.