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

Question

在运行此 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>

还有这个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");
      }
    });
  }
});

我可以从容器 1 拖放到容器 2，但我不能拖放回容器 1。我怎么能？

CodePen这里

Answer 1

修改代码如下

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

您提到收容是#container2，这是根本原因。 请找到更新的代码笔：https://codepen.io/anon/pen/wqLvQB