Take out an item with droppable out of the div - JQUERY UI

I'm doing with jquery ui, an element that should be able to crawl and then drop elsewhere (droppable). That element, it crawls perfectly but the problem is that it is inside a div and when I move it does not come out of there. The place where I must release it is outside the div, therefore, how can I get my element out and be able to drop it where it touches, because for now when I drag it out it does not come out. I am using Chromium and jquery touch pounch, in addition to bootstrap. Thanks.

Here the javascript:

<script> 
$( function() {
        $( ".list-group-item" ).draggable({
          revert: true
        });
        $( ".listaFav" ).droppable();
      } );
</script>

Here the html:

<section class="section">
    <div class="article">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">
            <picture>
                <img class="imagenLista" src="miimagen">
            </picture>
          </a>
        </div>
    </div>
</section>


<div class="listaFav ui-widget-header"></div>