This
article will show you how you can perform drag and drop operation using jquery
using for you asp.net application and mvc application.
So for this
article first we will add the below add
the below references and style in the
header of the page.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.childstyle {
background-color: gray;
}
.parentstyle {
background-color: red;
width: 200px;
height: 200px;
}
.afterdropeffect{
background-color:green;
}
</style>
|
After this
we will use the below code to show the operation.
<script>
$(function () {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("afterdropeffect")
.find("p")
.html("Thanks for
adding.");
}
});
});
</script>
|
In above
code I have performed drag and drop operation. In this after drag and drop the
event will maintain that the control has been added.
Now check the complete code of the page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI
Droppable Component Default Functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("afterdropeffect")
.find("p")
.html("Thanks for
adding.");
}
});
});
</script>
<style>
.childstyle {
background-color: gray;
}
.parentstyle {
background-color: red;
width: 200px;
height: 200px;
}
.afterdropeffect{
background-color:green;
}
</style>
</head>
<body>
<h3> jQuery UI
Droppable</h3>
<div id="droppable"
class="parentstyle">
<p>Drop Your Item
Here</p>
</div>
<div id="draggable"
class="childstyle" style="width:100px;height:60px;">
<p>Control to drop</p>
</div>
</body>
</html>
|
Now we have
done run the application to check the output.
About the Author
0 comments:
Please let me know your view