jQuery UI Sortable – Drag Items Between Two Lists

Mar 5, 14 • MiscellaneousNo CommentsRead More »

I’m breaking new grounds! Rather than focusing on just PHP content, I’ve decided to start posting about all technology and programming topics (there was just too much I wasn’t able to write about). I’m going to start with a small JS solution I had to come up with today whilst working.

The problem

I had to build a small amount of functionality for the user’s area on a small blog. Within the blog, users are able to subscribe to certain categories (and they receive email notifications based on which categories they subscribe to). The client wanted a UI that allowed the user to drag categories from a predefined list in to their own subscribed box. They also wanted the backwards capability of being able to drag a category from their subscribe box back out (essentially unsubscribing). When either action is triggered, an ajax call should be fired off to the server to make the change.

The problem in itself isn’t too difficult. However, a quick search online didn’t yield any fast results, so I simply had to read the documentation to create a solution.

The solution

HTML markup

Please choose your category preferences from the following list by simply draging your choices into the box below.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

I'm interested in:

  • I have been chosen
  • Another chosen

CSS Markup

.news-list {
    padding: 0;
}
.news-list li {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background: #fff;
    margin: 0 10px 0 0;
}
.news-list.interested li {
    background: #74ce9c;
}
.source-news h3 {
    font-size: 13px;
    margin: 0;
}
.interested-in {
    background: #e9f5f1;
    border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 13px 18px;
    margin: 18px 0 0 0;
}
.interested-in h3 {
    color: #74ce9c;
    font-size: 13px;
    margin: 0;
}

The HTML is very straightforward. As you can see, there are two sortable lists, each with items of their own. The idea is that you should be able to move items freely between the two lists. The CSS just makes it look slightly agreeable (it was close to the CSS required by the frontend, hence why I decided to quickly style it in that fashion).

Javascript

$(function () {
    var oldList, newList, item;
    $(".categories-sortable").sortable({
        connectWith: $('.categories-sortable'),
        start: function (event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function (event, ui) {
            console.log("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
        },
        change: function (event, ui) {
            if (ui.sender) {
                newList = ui.placeholder.parent();
            }
        },
    })
        .disableSelection();

});

The above Javascript snippet makes the two lists sortable, and allows for items to be dropped to and from each list. More over, it tracks when an item moves position. Within the stop function, if both the oldList.attr(‘id’) and newList.attr(‘id’) are different, it means an item was dragged from one list to another (it’s possible for the values to be the same, which simply reflects an item being sorted in a different position within the same list).

Within my actual application, the stop function served as the entry point to call another function, which sent an ajax request to the server, and performed various UI tasks to make the app look good and the process seamless (i.e. loading screens, success confirmation, etc.)

A fiddle of the working code can be seen at: http://jsfiddle.net/ajberri/hEJF3/

Comments are closed.