This article will show you how you can create a drag and
drop functionality of one item to other using jQuery in asp.net MVC.
Some of my previous articles are as follows: jQuery
Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC,
Auto
Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery
Slider and Range Slider Plugins, Theme
Creation for jQuery Mobile, Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, jQuery
Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net,
Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net,
Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net.
Do for this article first we will create a new asp.net mvc application and add the below refrence in your page.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now here is the css
style sheet for the boxes.
<style>
#draggableItem
{
width:
100px;
height:
100px;
padding:
0.5em;
float:
left;
margin:
10px 10px 10px 0;
background-color:
Blue;
color:
Yellow;
}
#droppableBox
{
width:
300px;
height:
300px;
padding:
0.5em;
float:
left;
margin:
10px;
background-color:
Yellow;
}
</style>
|
Now here is the jQuery code.
<script>
$(function
() {
$("#draggableItem").draggable();
$("#droppableBox").droppable({
drop: function
(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Item Dropped!");
}
});
});
</script>
|
The above code will react as the item will drop in the box,
and it will display the message “Item Dropped !”.
Now here is the complete code.
@{
ViewBag.Title = "jQuery
Drag and Drop Item Functionality In Asp.Net MVC";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#draggableItem
{
width:
100px;
height:
100px;
padding:
0.5em;
float:
left;
margin:
10px 10px 10px 0;
background-color:
Blue;
color:
Yellow;
}
#droppableBox
{
width:
300px;
height:
300px;
padding:
0.5em;
float:
left;
margin:
10px;
background-color:
Yellow;
}
</style>
<script>
$(function
() {
$("#draggableItem").draggable();
$("#droppableBox").droppable({
drop: function
(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Item Dropped!");
}
});
});
</script>
<div id="draggableItem">
<p>
Drag and Drop the This Box</p>
</div>
<div id="droppableBox">
<p>
Drop Item Here</p>
</div>
|
Now we have done run thee application to check the output.
About the Author
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'draggable'
ReplyDeleteyou must be missing library reference. u just download the code and use that
Delete