JQuery draggable drag and drop is flung around the edge

Question

I have draggable by a wide margin and the intersection tolerance. When I drag it into the drop-down box, most of the time it works. However, if I try to drop it at the top of the drop-down box, it will not fall properly, because the margin is calculated as part of the height.

Can anyone suggest a workaround for this? I tried to remove the margin at the beginning of the drag, but this leads to a weird jump of the draggable when you first grab it.

$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move'
})

$( ".droppable" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}})

http://jsfiddle.net/wQvWK/6/

Answer 1

. , .

var marginTop = 150;
$(".draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        stop: function(event, ui){
            if($('.droppable').position().top-$(this).height()/2 < ui.position.top+marginTop
              && $('.droppable').position().top+$('.droppable').height() > ui.position.top+marginTop+$(this).height()-$(this).height()/2
              && $('.droppable').position().left-$(this).width()/2 < ui.position.left
              && $('.droppable').position().left+$('.droppable').width() > ui.position.left+$(this).width()-$(this).width()/2) 
               {
                $('.droppable')
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
            }
        }
    });

:

http://jsfiddle.net/trevordowdle/wQvWK/5/

Answer 2

, , , . OR monkeypatch jQuery ui .

droppable : http://jsfiddle.net/wQvWK/2/ , .

 $( ".droppable" ).droppable({
   tolerance: 'intersect',
 drop: function( event, ui ) {
 $( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}})