CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortablejquery-ui-droppable
kidcapital
kidcapital

Reputation: 5174

jquery UI droppable and sortable not working?

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?

Upvotes: 5

Views: 6276

Answers (1)

solartic
solartic

Reputation: 4319

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()
});

Upvotes: 13

Related Questions