How to make jQuery UI droppable hoverClass work only with draggables?

Question

I have a sortable and droppable list, and also a separate set of draggables:

ul.sortable
    li.droppable
    li.droppable
    li.droppable
/ul
ul
    li.draggable
    li.draggable
    li.draggable
/ul

I apply a hover class on the droppables:

$(".droppable").droppable({ hoverClass: "hover" });

The hover is supposed to be a visual cue for the user, telling him that a draggable can be dropped onto a droppable.

The problem is that the hover class is also applied when a droppable is hovered by a sortable element as well. The visual cue is, in this case, totally wrong.

Here's a fiddle illustrating the issue (drag the draggables over the sortables, reorder the sortables): http://jsfiddle.net/TWXeH/

How do I make the hover class work only when there's a draggable over a droppable, but not with sortables?

Answer 1

You're looking for the accept option

$(".droppable").droppable({
    hoverClass: "hover",
    accept: ".draggable"
});