Drag & Drop with MVC & jQuery AJAX

So my wife decided she’d like her clients to be able to order prints off her website via some type of code. Well I thought I’d start with the fun part. The selection of pictures being dragged over to a cart of some sort. I’ve never used anything like this and thought it’d be fun to learn.

So here’s where I’m at…i have a couple graphics that are draggable to a cart. Once the graphic is dropped, it does something like write to a db or something and then returns a success. Let’s look at the code because I stink at explaining stuff I think…

<style type="text/css">
    .draggable { width: 100px; height: 100px; border: solid 1px #ccc; margin: .5em}
    #imageboundary {width: 500px; height:500px; border: solid 1px #ccc}
    #droppable {border: solid 1px #000; width: 150px; height: 150px}
</style>
<div class="result"></div>
<div id="imageboundary">
    <div id="droppable">
        <ul id="cart"></ul>
    </div>
    <img class="draggable" id="1234" src="../../_a/i/bck-logo.gif" />
    <img class="draggable" id="123456789" src="../../_a/i/bck-required.gif" />
</div>

So above is my sample HTML code, which is pretty simple I think. Here’s what I got…a few styles, a result box, a boundary for the drag, my cart, and two draggable images.

Okay, so I have a couple references to jquery & jquery.ui. Looks like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Okay, now I’m going to post the completed section as of right now, but I will be breaking it apart in sections further down.

<script type="text/javascript">
$(function() {
    $(".draggable").draggable({ containment: '#imageboundary', revert: 'valid' });
    $("#droppable").droppable({
        drop: function(event, ui) {
            $.ajax({
                type: "POST",
                url: '/Home/AddToCart/' + $(ui.draggable).attr("id"),
                success: function(data) {
                    $('.result').html(data);
                    $("<li>" + $(ui.draggable).attr("id") + "</li>").appendTo($('ul#cart'));
                }
            });
        }
    });
});
</script>

So…to make things draggable, we simply add this line:

$(".draggable").draggable({ containment: '#imageboundary', revert: 'valid' });

You can read more about this here.

To make a droppable box, it’s simply this:

        $("#droppable").droppable({
            drop: function(event, ui) {
                $('.result').html($(ui.draggable).attr("id"));
            }
        });

Granted this is not exactly like the code above, but I wanted to simplify it so you could see what it would take to make something droppable. You can read more about this here.

Now to make the ajax call to my action on my controller  you do this:

    $("#droppable").droppable({
        drop: function(event, ui) {
            $.ajax({
                type: "POST",
                url: '/Home/AddToCart/' + $(ui.draggable).attr("id"),
                success: function(data) {
                    $('.result').html(data);
                    $("<li>" + $(ui.draggable).attr("id") + "</li>").appendTo($('ul#cart'));
                }
            });
        }
    });

Okay, so on my HomeController I have an AddToCart action that looks like this right now:

        [AcceptVerbs(HttpVerbs.Post)]
        public string AddToCart(string id)
        {
            if (string.IsNullOrEmpty(id))
                return "Invalid id. Please press back or enable JavaScript.";

            //Add to cart logic

            return string.Format("Successfully added {0}.", id);
        }

I’m just getting started with this little project, but I thought I’d share.

Thanks for reading!