jquery.pep - 用内容覆盖drop div

Question

我想让jquery.pep为我工作。我想做的是，取一个div，能够将它拖到另一个div上，然后在轻松完成时将该div“插入”该DIV的innerhtml中。我有它的功能。但是，你会注意到，当我再次拖动同一个项目时，变换会使它偏移疯狂的值。我无法弄清楚我做错了什么。有人对我有任何暗示吗？这是一个Codepen链接，我的代码在一个工作示例中。

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