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
|
|||
|
|
3 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...