Javascript 第一次只能进行拖动和排序

我正在实现拖动和排序功能。我有两个可拖动的区域。你可以看看URL

1.只需以城市为例，将其放入活动理性中即可，然后再将城市从活动理性中取出，仍然一切正常。但同样，如果您尝试在Active reason中添加城市，则城市块将不可见

每次拖动时，我都会动态执行排序操作

$(function() {
$( "#sortable1, #sortable2" ).sortable({
  connectWith: ".connectedSortable",
  helper: 'clone',
  containment:"document",
  revert:"true",
  tolerance:"pointer"
   });
 });

 $("#sortable2").sortable({
  stop: function ( event, div){
  data = $(this).sortable('toArray', { attribute: 'data-id' });
  //Here we perform our ajax request
 },
 receive: function (event, ul) {
  ul.item.remove();
 }
 });

 //WITH EACH DRAG it connect with sort
 $("#sortable1>div").draggable({
   connectToSortable: "#sortable2",
   helper: "clone",
   revert: "invalid",
   axis :"y"
   });

$("#sortable2>div").draggable({
connectToSortable: "#sortable2",
helper: "clone",
revert: "invalid"
});

//HERE SOME HTML REFERENCE  
  <div id="sortable2" class="connectedSortable"> <span class="ui-sortable-handle">  ACTIVE</span></div> 

  <div id="sortable1" class="connectedSortable"> 
    // Here i have list of the element that i want to Drag
   </div> 

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
助手：“克隆”，
遏制：“文件”，
回复：“真”，
公差：“指针”
});
});
$（“#可排序2”）。可排序({
停止：功能（事件，div）{
data=$（this.sortable（'toArray'，{attribute:'dataid'}）；
//这里我们执行ajax请求
},
接收：功能（事件，ul）{
ul.item.remove（）；
}
});
//每次拖动时，它都与sort连接
$（“#可排序1>div”）.draggable({
connectToSortable:“#可排序2”，
助手：“克隆”，
回复：“无效”，
轴：“y”
});
$（“#可排序2>div”）.draggable({
connectToSortable:“#可排序2”，
助手：“克隆”，
回复：“无效”
});
//这里有一些HTML参考
活跃的
//这里有我想要拖动的元素列表

还有一件事，目前我拖动项目排序触发器，但这不是一个好办法，可能是一旦元素下降，然后排序需要开始。 请帮我解决这个问题。如果你还需要什么，请告诉我

---

谢谢。

你能发布你的HTML吗？我已经更新了帖子，请检查。。。