5

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?

kidcapital
  • 5,064
  • 9
  • 46
  • 68

1 Answers1

13

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()
});
solartic
  • 4,249
  • 3
  • 25
  • 26
  • @solartic - After about 2 hours, this was the post that helped me - Thanks! – Mark B Oct 05 '11 at 15:56
  • Finally found a solution to this! Ironically, IE was working fine with my setup but Chrome was struggling. Changing the tolerance to 'touch' worked great. – NightMICU Feb 13 '12 at 17:06