Search code examples
jquerydroppable

jquery drag and drop: Droppable doesnt work on elements with float:left or inline-block

Anyone else have this problem before?

I cannot seem to drop into TARGET that has display: inline-block or float:left.

Here's link to sample code: http://jsbin.com/arusu3/141

Some info I found: http://forum.jquery.com/topic/connecttosortable-fails-when-sortable-list-is-floated

I noticed if might work INLINE if I dump it EXACTLY in the middle. but it would be nice for it to accept drop if any part of my drag touches.

Solution

  • I was able to drop onto the div-inline. (Using latest Chrome)

    Perhaps it's a tolerance issue?

        target.droppable({
        drop: function(event, ui) {
            alert('row dropped ' + $(this).text());
        },
        accept: source.selector,
        tolerance: 'touch'
    });

    http://jsbin.com/arusu3/144 : edited the tolerance to 'touch'

    http://jqueryui.com/demos/droppable/#option-tolerance