Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Problems Combining jQuery Draggable, Droppable and Sortable

Combining jQuery UI Draggable, Droppable and Sortable Functionality

I was having some issues trying to incorporate jQuery UI's droppable, draggable and sortable on a project I'm currently working on. I was receiving some weird errors and I'm still not 100% what was going on, but I broke out the code and simplified it to get it working and I figured I would share.

Essentially, my project calls for a navigation bar that has psuedo-buttons (div's) which need to be dragged upon multiple areas that in turn, need to be sortable. I've illustrated a layout, so you can better understand what I was trying to do (Fig. 1).

Draggable, Droppable & Sortable Layout Example

How It Works

A user would be able to drag items from the navigation bar (the grey buttons) onto the list below. This action would append new items to the list. Also, the user would be able to click and drag on the list to rearange items in the list, as well as drag items from one list to the other. (In this example, I only have two list, but in theory you could have as many as you want.)

The HTML

The HTML is fairly straight-forward. The first <div> block contains our navigation elements and the following <div>'s are the list items.

<div class="row">
    <div class="button" data-item="10">Item 10</div>
    <div class="button" data-item="11">Item 11</div>
    <div class="button" data-item="12">Item 12</div>
</div>
<div class="dropme">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
    <div>List Item 4</div>
    <div>List Item 5</div>
</div>
<br />
<div class="dropme">
    <div>List Item 1</div>
    <div>List Item 2</div>
    <div>List Item 3</div>
    <div>List Item 4</div>
    <div>List Item 5</div>
</div>

The CSS

Nothing special about the CSS.

.row {
    display: block;
    width: 100%;
    height: auto;
}
.button {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-align: center;
    background: #eee;
}
.dropme {
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
}
.dropme div {
    display: block;
    width: 150px;
    border: 1px solid #ccc;
}
.highlight {
    padding: 5px;
    border: 2px dotted #fff09f;
    background: #fffef5;
}

The Javascript

In order to get this script to work, you will need to include both the jQuery and jQuery UI libraries. (For my demo, I am using version 1.6 and 1.8 for UI). They can be included in <script> tags or placed in code, either in the header or at the end of the document.

(function ($) {
    $('.button').draggable({
        cursor: 'pointer',
        connectWith: '.dropme',
        helper: 'clone',
        opacity: 0.5,
        zIndex: 10
    });
    
    $('.dropme').sortable({
        connectWith: '.dropme',
        cursor: 'pointer'
    }).droppable({
        accept: '.button',
        activeClass: 'highlight',
        drop: function(event, ui) {
            var $li = $('<div>').html('List ' + ui.draggable.html());
            $li.appendTo(this);
        }
    });
}(jQuery));

Demo

Checkout the jsFiddle Demo, so you can test drive it yourself.

Conclusion

This entry was created mainly so I would have a nice reference to it in the future, but also I wanted to share it with others you might be having similar issues. Let me know if you have any questions.