jquery - Append draggable to droppable after swap -

i've searched question couldn't find yet. please correct me if i'm wrong. can more people if question gets answered.

i'll explain situation first:

html

<div id="p1" class="base"> <!-- box -->  <div class="card">1</div>  <!-- dynamically created div -->  </div> <div id="p2" class="base"> <div class="card" style="background-color: green">2</div>  </div> 

i have multiple boxes act droppable. when click on box, div created , appended box , div draggable.

i've figured out how drag div between multiple boxes. here problem:

when there's each box has div dropped it, want able swap div between boxes , append them box new box.

for example: box 1 has div 1 , box 2 has div 2. want swap them box 1 has div 2 , box 2 has div 1 appended them child.

i made example shows how have code: http://jsfiddle.net/h7ysb/

$(".card").draggable({  revert: true,  zindex: 10,  snap: ".base",  snapmode: "inner",  snaptolerance: 40,   start: function (event, ui) {     lastplace = $(this).parent();  }  });  $(".base").droppable({  drop: function (event, ui) {      ui.draggable.detach().appendto($(this));      var dropped = ui.draggable;     var droppedon = this;      if ($(droppedon).children().length > 0) {         $(droppedon).children().detach().appendto($(lastplace));     }  } }); 

this question looks bit want, doesn't append draggable new droppable.

i've found answer myself.

you can find here:

http://jsfiddle.net/colinch/h7ysb/6/

if use dynamically created divs being swapped, need change code little bit.

when creating dynamic created div:

element.draggable({             revert: true,             zindex: 10,             snap: ".base",             snapmode: "inner",             snaptolerance: 40, }); 

and have put code droppable outside function create div:

$(".base").droppable({             drop: function (event, ui) {                 var dropped = ui.draggable;                 var droppedon = this;                 lastplace = dropped.parent().attr("id");                  if ($(droppedon).children().length > 0) {                      $(droppedon).find(".card").detach().appendto($("#"+lastplace));                  }                  $(dropped).detach().css({                     top: 0,                     left: 0                 }).appendto($(droppedon));               }          }); 

i should thank guy other question (see link in first post) of code. can this.