11

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?

tags2k
  • 82,117
  • 31
  • 79
  • 106
  • Possible duplicate of [jQuery Sortable and Droppable](http://stackoverflow.com/questions/2090121/jquery-sortable-and-droppable) – T J Jan 13 '16 at 17:17

2 Answers2

18

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/

PetersenDidIt
  • 25,562
  • 3
  • 67
  • 72
  • 2
    i was pulling my hair out using draggable, droppable and trying to combine them with sortable to order several lists and drag/drop between them. You just use sortable for them all and no draggable and droppable and it just works. Thanks! – Johan Wikström Jan 26 '11 at 08:40
  • thanks @JohanWikström , I was doing the same thing for some reason. changing it to just use sortable sorted (ahem) me out :) – CommentLuv Feb 25 '12 at 19:49
  • 2
    The `connectWith` option of sortable only connects sortables. It doesn't connect with droppables. The item [simply reverts back to sortable](http://jsfiddle.net/YDZJs/303/). Your demo [does the same thing](http://jsfiddle.net/YDZJs/302/) without the `connectWith` option. – T J Sep 28 '14 at 07:39
  • This solutions works great. Please accept as the answer. – Sean N. Jun 21 '16 at 15:53
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?

Thomas
  • 2,162
  • 1
  • 13
  • 10
  • How would it become a sortable (unless the system was not developed with the possibilty of a differentiation between "droppable' (another jquery-ui thing) and "sortable". Seems to me the answer is to make a droppable class, a sortable class and a draggable class. – Kevin Peno Nov 03 '10 at 05:00
  • I was operating under the assumption, as OP described, that there are liimitations on the connectWidth option. Making the trash can a sortable would have been a seemingly simple work-around. However, since PetersenDidIt's solution clearly works, there's no need for dirty underhanded abuse of concepts. ;) – Thomas Nov 03 '10 at 08:51