CODEWITHSUNDEEP
jquery-uihoverdraggablejquery-ui-sortabledroppable
mingos
mingos

Reputation: 24502

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

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?

Upvotes: 2

Views: 5453

Answers (1)

p.kelly
p.kelly

Reputation: 435

You're looking for the accept option

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

Upvotes: 7

Related Questions