如何在两个容器之间拖放？

Question

While running this HTML

<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>

and this JS

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");
      }
    });
  }
});

I am able to drag and drop from container 1 to container 2 but i cannot drag and drop back to container 1. How could I?

CodePen here

Answer 1

Just change code as below

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

you mentioned containment as #container2 that is the root cause. Please find the Updated Code Pen: https://codepen.io/anon/pen/wqLvQB