connectseekers.com

Tuesday, 24 March 2015

jQuery Drag and Drop Item Functionality In Asp.Net MVC

3/24/2015 - By Pranav Singh 2

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.


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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

2 comments:

  1. 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'draggable'

    ReplyDelete
    Replies
    1. you must be missing library reference. u just download the code and use that

      Delete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top