当鼠标离开原始容器时，移动元素jQuery UI可拖动

Question

我想只在鼠标离开原始容器时移动可拖动元素。当鼠标仍在原始容器内时，元素在保持静止时可拖动。当用户的鼠标在拖动时离开原始容器时，则开始移动可拖动元素。

这是我到目前为止所做的事情

$('.photo-segment').draggable({
        containment:'#layout-draggable',
        scroll:false,
        revert:"invalid",
        opacity:0.8,
        zIndex:100,
        helper:function(event){
             return $( "<div></div>" ); //make it look like the element is not moving at the beginning or the mouse is still inside the container.
        },
        start:function(event, ui){
            initial_rect = $(this).parents('.photo-segment-container')[0].getBoundingClientRect(); //specify the region the of the container, when the mouse is inside this region, don't move the element at all, when the mouse is outside of this region, start moving, the container is the same size of the draggable element.
        },
        drag:function(event,ui){
            if(initial_rect.left < mouseViewPortX && mouseViewPortX < initial_rect.right && initial_rect.top < mouseViewPortY && mouseViewPortY < initial_rect.bottom){
                //don't move the element at all, using the default helper that make the element look like static
                console.log('inside');
            }else{  
                //when the cursor move out of the original container, make the helper becomes original and allow moving
                console.log('outside');
                $(this).draggable( "option", "helper", "original" );
            }
        }
    });

这种方法并不理想。一旦鼠标开始退出容器，代码将把帮助器设置回原始状态，但是，这不会立即移动元素。我必须开始一个新的拖动然后元素能够移动。我需要的是，一旦当前拖动使鼠标在给定区域之外，使容器立即移动。我不确定这是否可行。任何想法将不胜感激。