JQuery Drag And Drop in ASP.NET MVC Razor View

JQuery is a very cool JavaScript API. We can do a lot of things with minimum code using JQuery. Also a number of available plug-ins made the development much easier. Using JQuery-UI we can design very cool user interfaces.

Here I will give an example of drag and drop using JQuery API. The example will contain two galleries. We can drag and drop boxes between the two galleries.

I will describe this in an ASP.NET MVC application with Razor view. So create an a JQueryTest ASP.NET MVC 3.0 project and it will give us a nice template with section for Model, View and Controller.

I have added separate controller JQueryTestController.cs under Controllers folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace JQueryTest.Controllers
{
    public class JQueryTestController : Controller
    {        
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Draggable()
        {
            return View();
        }
    }
}

Here the Draggable Action will return our View “Draggable “. Here is the “Draggable” view

@{
    ViewBag.Title = "Draggable";
}
<h2>
    Draggable</h2>
<div id="test-container" class="test_container">
    <div id="gallery-one" class="gallery_one">
        <div id="box1" class="box">
            ONE
        </div>
        <div id="box2" class="box">
            TWO
        </div>
        <div id="box3" class="box">
            THREE
        </div>
        <div id="box4" class="box">
            FOUR
        </div>
    </div>
    <div id="gallery-two" class="droppable gallery_two">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        galleryDragAndDrop("#test-container", "#gallery-one", "#gallery-two", ".box");
    });        
</script>

In the view two galleries “gallery-one” and “gallery-two” within the container “test-container”. The “gallery-one” contains four boxes which we can drag and drop between the two galleries.

The javascript function galleryDragAndDrop(mainContainer, containerOne, containerTwo, dragItem) will activate the drag and drop features for us.

Here is the javascript function.

function galleryDragAndDrop(mainContainer, containerOne, containerTwo, dragItem) {
    $(dragItem).draggable(
        {
            revert: "invalid",
            containment: mainContainer,
            helper: "clone",
            cursor: "move",
            drag: function (event, ui) {
                $(ui.helper.prevObject).addClass("box_current");
            },
            stop: function (event, ui) {
                $(ui.helper.prevObject).removeClass("box_current");
            }
        });

    $(containerTwo).droppable({
        accept: dragItem,
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            acceptBoxIngalleryTwo(ui.draggable);
        }
    });

    $(containerOne).droppable({
        accept: dragItem,
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            acceptBoxIngalleryOne(ui.draggable);
        }
    });

    function acceptBoxIngalleryTwo(item) {
        $(item).fadeOut(function () {
            $(containerTwo).append(item);
        });

        $(item).fadeIn();
        $(item).removeClass("box_current");
    }

    function acceptBoxIngalleryOne(item) {
        $(item).fadeOut(function () {
            $(containerOne).append(item);
        });

        $(item).fadeIn();
        $(item).removeClass("box_current");
    }
}

We need to pass the required selectors to the function to make it workable.
galleryDragAndDrop(“#test-container”, “#gallery-one”, “#gallery-two”, “.box”);

And bellow is the required css

/* Draggable Test Styles */

.test_container
{
    width: 800px;
    height: 380px;
    background-color: #D6D6D6;
    overflow: hidden;
}

.gallery_one, .gallery_two
{
    float: left;
    width: 270px;
    height: 260px;
    border: solid 1px #BBBBBB;
    margin: 60px 0px 0px 50px;
    overflow: hidden;
    background-color: #CED5DB;
}

.box
{
    float: left;
    width: 100px;
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    background-color: #E1E1E1;
    margin: 20px 0px 0px 20px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    border: 1px solid #B3B3B3;
    font-weight: bold;
}

.gallery_two
{
    margin: 60px 0px 0px 150px;
}

.box_current
{
    background-color: #BBBBFF;
}

Bellow some screenshot of the gallary:

View One

View Two

View Three

View Four