0

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

rob.m
  • 9,843
  • 19
  • 73
  • 162
  • 1
    https://stackoverflow.com/questions/14308290/jquery-draggable-and-droppable-between-two-containers-and-sortable – DenseCrab Sep 07 '17 at 13:44
  • Possible duplicate of [jQuery draggable and droppable between two containers and sortable](https://stackoverflow.com/questions/14308290/jquery-draggable-and-droppable-between-two-containers-and-sortable) – random_user_name Sep 07 '17 at 14:03
  • @cale_b I had a look at those answer before and I couldn't make it work with mine. – rob.m Sep 07 '17 at 14:13

1 Answers1

0

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

Vishnu Dhanakotti
  • 123
  • 9
  • excellent, thanks a lot, tbh i had achieved it too and I was going to add my own answer by simply removing the containment state all together, https://codepen.io/anon/pen/XaLWgM – rob.m Sep 07 '17 at 14:13