JQuery UI droppable and sortable not working?

Question

I searched around and could not find a solution to this problem.

I am trying to integrate jqueryUI sortable and draggable, but I cannot get it to work.

I have a very simple demo here. I tried to reduce it to a SIMPLEST implementation, since all the other examples I found on SO were quite complicated.

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

Does anyone know why this basic example will not work?

EDIT: I realized this is a CSS class that destroys all of this. If you remove the CSS class, it works fine. Working version without CSS class http://jsfiddle.net/e4Z8N/17/ Does anyone know why it behaves this way?

Answer 1

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

• fit: draggable completely overlaps droppable
• intersect: draggable overlaps the discarded at least 50%
• pointer: mouse cursor overlaps droppable
• touch: draggable overlaps the discarded amount

"touch" seems to work. You can try others.

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