JQuery Drag and Drop using Visual Studio 2010 in VB.NET
Learn about JQuery Drag and Drop which is used to convert group of elements into a list that can be sorted by dragging the items.
Drag and Drop usually used to convert group of elements into a list that can be sorted by dragging the items. People generally use drag-and-drop on lists, tables, paragraphs or anything as long as you group the items.
In the following example we'll take a look at how to create drag-and-drop interfaces with jQuery. Use the following Google's CDN, to include jquery library and jquery UI plugin to your page.
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
...
</head>
Here we add a div to design gallery and then drag it to another div. You need to just call the draggable() method on it. Lets see the complete code.
<html>
<head>
<title>JQuery Drag and Drop</title>
<style>
#makeMeDraggable { width: 202px;height: 140px;background: red; }
.style1
{
color: #CC0099;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"
style="border-style: ridge; border-color: #CC0099; background-color: #FFE8FF">
<br />
<span class="style1">
<strong style="font-family: Verdana; font-size: small; font-weight: bold">
I am a Div, Drag me!</strong></span></div>
</div>
</body>
</html>
End Result
Now drag the div with mouse drag into another div and see the output like below.
If you want highlight the dragged element add a CSS rule for the class ui-draggable-dragging in jquery UI. Let's do some modification so that div will changes from red to green while it's being dragged:
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#makeMeDraggable.ui-draggable-dragging { background: green; }
</style>
Enjoy the JQuery Coding...