jquery UI droppable and sortable not working?

Question

I searched around and couldn't find a solution to this problem.

I am trying to integrate jqueryUI sortable and draggable but I can't seem to get it to work.

I have a VERY basic demo here. I've tried to reduce it to the SIMPLEST implementation possible as all the other examples I found on SO were rather complicated.

http://jsfiddle.net/e4Z8N/7/

Does anyone have any idea why this basic example won't work?

EDIT: I've figured out that it is the CSS class that disrupts the whole thing. If you take away the CSS class it works fine. Working version w/o CSS class http://jsfiddle.net/e4Z8N/17/ Does anyone know why it behaves like this?

Answer 1

Change the tolerance to a more suitable value. The default is intersect.

• fit: draggable overlaps the droppable entirely
• intersect: draggable overlaps the droppable at least 50%
• pointer: mouse pointer overlaps the droppable
• touch: draggable overlaps the droppable any amount

"touch" seem to work. You can try the others.

$(function () {
    $('#trash_bin').droppable({
        tolerance: 'touch',
        drop : function() {
            alert('delete!')
        }
    });
    $('#trash').sortable()
});