Making a jQuery droppable accept items from a sortable which is using connectWith

Question

I've got a sortable list which is using connectWith to ensure it can only be sorted within its own types of list.

Now I'm trying to make a droppable trash can element that appears at the bottom on the viewport when an item is being sorted. This element is outside the context of the lists and simply deletes any element that is dropped on it. The desired functionality is identical to deleting a shortcut from the desktop of an Android phone, if you are familiar with that.

The problem is, although my trash can is a droppable which accepts '*', my sortable is told only to connectWith other '.dropZone' items only, which means I cannot get any of my sortable elements to cause a hover state on the trash element.

I've tried making each sortable into a draggable on the start event, but of course I'm not dragging that draggable at the exact moment and so it's not activated. Is it possible to satisfy both requirements or am I going to have to detect the trash can hover manually?

Answer 1

Since connectWith accepts a selector, you can provide it a selector that selects both the other connected lists and your trash can.

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#trash").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});

Example: http://jsfiddle.net/petersendidit/YDZJs/1/