jquery tabs - droppable divs onto tabs

Question

I am trying to combine this answer (non-overlapping draggable divs) with this answer (droppable li elements onto tabs) but cannot figure it out. In my example, I also added a resizable attribute to the movable divs.

The non-overlapping aspect works fine. Tab re-arranging works fine.

But I cannot figure out how to drag/drop .box-container div elements onto other tabs.

Other answers to similar questions give so many different ways to call droppable, and some of the accepted answers actually don't work (in their fiddles!). I just can't figure this one out yet. Hope someone can lend a hand...

    var vtabs = $( "#tabs" ).tabs();

 //drag around tabs
    vtabs.find( ".ui-tabs-nav" ).sortable({
      axis: "x",
      stop: function() {
        vtabs.tabs( "refresh" ); 
       }
    });
    
  $('.ui-tabs-panel').droppable({
    tolerance: 'fit',
                accept: ".box-container",
                drop: function(event,ui) {
                    alert("hello drop, why not dropping on the tab?");
                }
  });
    
      $( '.box-container' ).resizable({
       containment: ".ui-tabs-panel"
      });   
      $('.box-container').draggable({
       revert: 'invalid',
       stop: function(){
        $(this).draggable('option','revert','invalid');
       }
      });
      $('.box-container').droppable({
       greedy: true,
       tolerance: 'touch',
       drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
       }
      }); 
      $('.box-container').sortable({
        tolerance: 'pointer',
        cursor: 'move',
        forcePlaceholderSize: true,
        dropOnEmpty: true,
        connectWith: '.ui-tabs-nav',
        placeholder: "ui-state-highlight"
      }).disableSelection(); 

.box-container {width:100px; height:100px; border:1px solid silver; background-color:whitesmoke;} 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs" class="ui-tabs">
   <ul class="ui-tabs-nav ui-sortable">
  <li tabindex="0" class="ui-tabs-tab ui-state-default ui-droppable ui-tabs-active ui-state-active" style="position: relative; top: 0px; left: 0px;">
   <div class="atab" style="opacity: 1;"><a href="#tabs-1" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Mytab</a></div>
  </li>
  <li tabindex="-1" class="ui-tabs-tab ui-state-default ui-tab">
   <div class="atab" style="opacity: 1;"><a href="#tabs-2" tabindex="-1" class="ui-tabs-anchor" id="ui-id-5">YourTab</a></div>
  </li>
  <li tabindex="-1" class="ui-tabs-tab ui-state-default ui-tab">
   <div class="thetab"><a href="#tabs-3" tabindex="-1" class="ui-tabs-anchor" id="ui-id-6">OurTabs</a></div></li>
 </ul>
 <div id="tabs-1" class="ui-tabs-panel ui-droppable" style="display: block;">
  <div id="box0" class="box-container ui-resizable ui-draggable ui-draggable-handle ui-droppable ui-sortable">
   <div id="box0-content" class="box-content ui-state-normal ui-sortable-handle">[content 1]</div>
  </div>
  <div id="box1" class="box-container ui-resizable ui-draggable ui-draggable-handle ui-droppable ui-sortable">
   <div id="box1-content" class="box-content ui-state-normal ui-sortable-handle">[content 2]</div>
  </div> 
  <div id="box2" class="box-container ui-resizable ui-draggable ui-draggable-handle ui-droppable ui-sortable">
   <div id="box2-content" class="box-content ui-state-normal ui-sortable-handle">[content 3]</div>
  </div>  
 </div>
 <div id="tabs-2" class="ui-tabs-panel ui-droppable" style="display: none;"></div>
 <div id="tabs-3" class="ui-tabs-panel ui-droppable" style="display: none;"></div>
</div>