jQuery位置无法正常工作

Question

我正在尝试使用HTML，CSS和jQuery进行简单的拖放游戏。我有带轮廓的div作为背景，中间有可以拖放的项目的微缩模型。

我想要它，以便当我在正确的位置放置一个缩影时，它移动到插槽的中心并向上扩展以覆盖轮廓。现在它只能正确定位，如果我把它放在插槽的左上方，每隔一个方向它就不在它的位置，即使我使用中心。

以下是我使用JavaScript的CSS和HTML：

http://jpst.it/AqX7

http://jpst.it/AqXa

ui.draggable.animate({
  "width": parentWidht
}, {
  duration: 200,
  queue: false
}).toggleClass("makeDraggable").position({
  of: $(this),
  my: "center center",
  at: "center center",
  collision: "none",
  using: function(css, calc) {
    $(this).animate(css, 200, "linear");
  }
}, {
  duration: 200,
  queue: false
});

Example

为什么我的照片不在中心位置？

谢谢！