Introduction:
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.
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 Email
|
|||
5 comments :
gudddd.........
not bad......................
Very nice, thanks..
Poor.. Any Body can do it... Do a validation
i tried this, but my dragging div placed behind the main div........how to make it visible
Note: Only a member of this blog may post a comment.