jQuery UI sortable remove item not working

Question

I've integrated jQuery UI sortable and I've created an "draggable" list of items, a "sortable" list of items and a "droppable" list where if I drop the items from "sortable" list it remove them.

Here's the JS responsible for this:

$(document).ready(function () {
$(".sortableList").sortable({
    //revert: true,
    /*update: function (event, ui) {
        // Some code to prevent duplicates
    }*/
});
$(".draggable").draggable({
    connectToSortable: '.sortableList',
    cursor: 'pointer',
    helper: 'clone',
    revert: 'invalid'
});

$('.droppableArea').droppable({
    accept: 'li',
    drop: function(event, ui) {
        ui.helper.remove();
    }
});
});

I'm not sure If I explained clearly, however is a jsfiddle of how exactly this works.

As you see, it works great.

I've implemented this in my website along with some other jQuery plugins like "jquery-menu-aim" which is displaying submenus when you hover over a menu item. I've changed the ".droppableArea" class with my "#sidebar-wrapper" but is not working.

When I try to drop the item into the sidebar wrapper it doesn't remove it from the sortable list.

Here's a jsfiddle of what I'm trying to do.

Hover over the "Headers" and then drag one of the images to where it says HOVER "HEADERS" AND DROP IMAGES HERE and then try to drag the image from there into the sidebar wrapper and you will see that the image is not removed.

Any ideas what can be wrong ?

Trevor Trevor · Accepted Answer · 2014-08-05T15:19:58

It's because the width of the Sortable LI is wide enough that jQuery UI still thinks you are trying to sort when you drag it to the sidebar wrapper. To see that this is the case add the following CSS

.sortableList li {
   width:150px;
}

You'll need to adjust the width of your sortables so that they are no wider than the image.

jQuery UI sortable remove item not working

1 Answers