2つのコンテナ間でドラッグアンドドロップする方法は？

Question

JSこのHTMLに

var currentParent; 
$(".dropEL").draggable({ 
    containment: "#container2", 
    grid: [ 20, 40 ], 
    snap: true, 
    start: function(){ 
    currentParent = $(this).parent().attr('id'); 
    } 
}); 
$('#container1, #container2').droppable({ 
    accept:'.dropEL', 
    drop: function(event,ui) { 
    if (currentParent != $(this).attr('id')) { 
     $(ui.draggable).appendTo($(this)).removeAttr('style'); 
    } 
    $(this).find("div").on("click", function(e){ 
     e.stopImmediatePropagation(); 
     if($(this).hasClass("col-6")) { 
     $(this).find("p").css("background-color", "red"); 
     $(this).removeClass("col-6").addClass("col"); 
     } else { 
     $(this).find("p").css("background-color", "green"); 
     $(this).removeClass("col").addClass("col-6"); 
     } 
    }); 
    } 
}); 

を

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
     <div class="row"> 
     <div class="col"> 
      <div id="container1"> 
      <div class="dropEL col-6"> 
       <p>Element 1</p> 
      </div> 
      <div class="dropEL col-6"> 
       <p>Element 2</p> 
      </div> 
      </div> 
     </div> 
     <div class="col"> 
      <div id="container2"></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

と、このを実行している間、私はコンテナ2に容器1からドラッグ＆ドロップすることですが、私は戻って、コンテナ1にドラッグ＆ドロップすることはできませんどうすればいい？

ここCodePen

Answer 1

あなたが根本的な原因である＃1にcontainer2として封じ込めを述べ

$(".dropEL").draggable({ 
     containment: ".container", 
     grid: [ 20, 40 ], 
     snap: true, 
     start: function(){ 
     currentParent = $(this).parent().attr('id'); 
     } 
    }); 

以下のようにするだけのコードを変更します。 更新されたコードペンを見つけてください：https://codepen.io/anon/pen/wqLvQB