jquery选项卡 - droppable divs到选项卡上

Question

我正在尝试将this answer（不重叠的可拖动div）与this answer（可放置的li元素放在标签上）结合起来，但无法弄明白。在我的例子中，我还为可移动的div添加了一个可调整大小的属性。

非重叠方面工作正常。标签重新安排工作正常。

但我无法弄清楚如何将.box-container div元素拖放到其他标签上。

类似问题的其他答案提供了许多不同的方式来调用droppable，并且一些已接受的答案实际上不起作用（在他们的小提琴中！）。我只是想不出这个。希望有人能伸出援助之手......

    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>