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

How about making the trash can a .dropZone as well? Then you would get a proper drop event, and you could handle the deleting properly.

There may be side effects of making the trash can a sortable, but I figure they should be easy to work around.

If this doesn't meet your requirements, could you throw up a demo somewhere, so we know what exactly we'd have to work around to keep your structure intact, while still adding the functionality you need?

Answer 2

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/