嵌套Droppable并可用Jquery

Question

我有两个div（firstList，secondList），其中包含引导面板项。

我可以将bootstrap面板项从firstList拖放到secondList，反之亦然。

两个列表都是可排序的。

我能解决这个问题。但是我想让一些面板项也可以删除。

以下是一些代码：

//draggable panel items.  
$(".block").draggable({ 
      addClasses: false,
      connectToSortable: "#secondList, #firstList, .droppableBlock",
      revert: true,
      revertDuration: 0,
      zIndex: 1000,
    });
//droppable panel items.
    $(".droppableBlock").droppable({
        accept: "*", 
        greedy: true,
        drop : function(event, ui){
          ui.draggable.appendTo($(this));
        }      
    });

//lists are sortable and droppable
    $("#secondList, #firstList").sortable({
      items: ".block",    
    }).droppable({
        greedy: false,
        drop : function(event, ui){                
            $( this ).find( ".placeholder" ).remove();
            ui.draggable.appendTo($(this));         
      }    
    });
});

一些Html元素

<!-- Sample block element. I can drag and drop it. -->
   <div class="panel panel-default " id="uniq2">
        <div class="panel-heading">
        <h3 class="panel-title">Drop Here</h3>
      </div>
      <div class="panel-body droppableBlock">
        <!-- I want to drop .block elements to here. -->
      </div>
             <div class="panel-heading">
        <h3 class="panel-title ">Drop Here </h3>
      </div>
        <div class="panel-body droppableBlock">
        <!-- I want to drop .block elements to here. -->
      </div>
      <div class="panel-footer"></div>
    </div>


    <!-- Default Block Element -->
    <div class="panel panel-default block" id="uniq1">
      <div class="panel-body">
        Anything 
      </div>
    </div>

示例https://jsfiddle.net/LmeLfv81/

当我删除

  connectToSortable: "#secondList, #firstList, .droppableBlock",

这一行。我可以将.block项目拖放到.droppableBlock。但那个时候我无法对物品进行分类。当我添加connectToSortable我可以排序。但是我无法将.block项目拖放到.droppableBlock。