[SOLVED] Prevent jQueryUI sortable triggering droppable events when inside a droppable container

Prevent jQueryUI sortable triggering droppable events when inside a droppable container

I have a droppable container that also contains sortable elements inside it. The two components are unrelated but the sortable container must live inside the droppable container for the design to work.

My problem is that when I re-arrange the sortable elements, it triggers the same droppable event as it would if I dragged a draggable element onto it.

This jsFiddle demonstrates the issue: http://jsfiddle.net/48tmyLeb/2/

So far, the only solution I have found is to perform a check in the droppable event to make sure the element dropped is of the draggable type. However, this isn't ideal as the sortable still triggers the opacity change.

$('.droppable-container').droppable({
    snap: true,
    hoverClass: 'droppable-hover',
    drop: function (event, ui) {
        // Ignore droppable events triggered by sortable
        if (ui.draggable.hasClass('my-sortable-element')) {
            return;
        } else {
            // Do something
        }
    }
});

...I figure there must be a better way than this. Has anyone solved this?

EDIT: Thanks to @Twisty for providing a solution. For me, all I needed was to specify the accept option when creating the droppable:

$('.droppable-container').droppable({
   accept: 'tr',
   ...
});

Solution

Using the proper selector will ensure that the two can work without interference.

$('.droppable-container:not(.sortable-container)').droppable({

Working Example: http://jsfiddle.net/Twisty/z23nwhbf/

I can drop rows on one and still sort the other.