Home > ASP.NET MVC, CSS, Drag & Drop, JQuery > JQuery Drag And Drop in ASP.NET MVC Razor View

JQuery Drag And Drop in ASP.NET MVC Razor View

September 12, 2011 Leave a comment Go to comments

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 1

View Two
View Two

View Three
View Two

View Four
View Two

Advertisements
  1. Coder
    March 4, 2013 at 5:18 am

    Something is missing here. It doesn’t work in Chrome 25, or IE9, or Firefox 19… The boxes are not draggable, and there is an error in the JS console: “Uncaught TypeError: Object [object Object] has no method ‘draggable'”.

    • PattrickKing
      June 29, 2013 at 5:13 pm

      Coder,

      I just implemented this code and ran it in Chrome 27 with no issues. Most likely, if you’re getting ‘draggable’ type errors, it’s because you’re not referencing jQuery UI (after your jQuery reference).

  2. March 7, 2013 at 6:28 pm

    Hi, this is a great article. But how do I do the callback to get the updated position in the c# code?

  3. Joel
    August 14, 2014 at 3:28 am

    Also curious how to get the callback of the updated position… thanks!!!!

  4. Aniket Godse
    June 26, 2015 at 5:51 am

    .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;
    }

    $(document).ready(function () {
    galleryDragAndDrop(“#test-container”, “#gallery-one”, “#gallery-two”, “.box”);
    });

    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”);
    }
    }

    ONE

    TWO

    THREE

    FOUR

    i was implemented it like above but its not working.
    Please tell where m i going wrong.

  1. June 16, 2012 at 12:15 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: