Transform not working after replace element

[natedavis]

I am trying to get jquery.pep to work for me. What I want to do, is take a div, be able to drag it onto another div, and then have that div be "inserted" into the innerhtml of that DIV when ease is done. I have it functioning. But, you will notice, that when I goto drag the same item a second time, the transform makes it offset crazy values. I can't figure out what I am doing wrong. Anyone have any hints for me?

http://codepen.io/anon/pen/KMaYyd?editors=1111

HTML

<div class='droppable'>
  <div class='pep'></div>
</div>
<div class='droppable'></div>
<div class='droppable'></div>
<div class='droppable'></div>

CSS

.pep {
  background: blue;
  height: 100%;
  width: 100%;
  cursor: move;
}

.droppable {
  background: green;
  border: solid 5px black;
  height: 100px;
  width: 100px;
  display: inline-block;
}
.droppable.pep-dpa {
  border-color: red;
}

JS

var $pep = $('.pep');

$pep.css('width', $pep.outerWidth());
$pep.css('height', $pep.outerHeight())

$pep.pep({
  useCSSTranslation: true,
  droppable: '.droppable',
  revert: true,
  useBoundingClientRect: true,
  disableSelect: false,
  rest: function(ev, obj){
    var drop = $(this.activeDropRegions[0]);
    $(obj.el).appendTo($(drop));
    $(drop).children().removeAttr('style');
  },
  deferPlacement: true,
  useBoundingClientRect: true,
  revertIf: function(){
    return !this.activeDropRegions.length;
  }
});

[natedavis]

I posted this same question on StackOverflow

http://stackoverflow.com/questions/38046543/jquery-pep-overwrite-drop-div-with-content

[pixelplant]

Since no one is willing to help you, here, I had a shot at it: http://codepen.io/nekosan/pen/XjZqKb?editors=1111

Seems to work as you want to. It's probably 3 months too late but yeah, this project seems kinda dead. I'm thinking of switching to another solution as there's too much trouble having pep bend to my needs