动画一个对象从一个地方到空div的许多div

Question

我试图做一个游戏，游戏包含带有imgs的包装器和另一个包含有限7个地方的包装器，其中包含用户点击img这个img动画到空位直到7个位置完成时用户将选择的选项。 如何找到空位并且此代码没有动画img到目的地。

＆＃13;

＆＃13;

function animateItem(elem){
  var source_id = $(elem).attr("id");
  var source = $(source_id).contents();
  var destination = $('#choice-1');
  source.animate(source.offset(), 1000, function() {
    $(source).contents().appendTo(destination);
    source.remove();
  });
}

＆＃13;

<div class="office-panel">
        <img src="img/screen3/book.png" class="book">
        <img src="img/screen3/camera.png" class="camera">
        <img src="img/screen3/clock.png" class="clock">
        <img src="img/screen3/compass.png" id="item-1" class="compass"  onclick="animateItem(this)">
        <img src="img/screen3/connection_plan.png" class="plan">
        <img src="img/screen3/earth.png" class="earth">
        <img src="img/screen3/fish.png" class="fish">
        <img src="img/screen3/map.png" class="map">
        <img src="img/screen3/Glasses.png" class="glasses">
        <img src="img/screen3/phone.png" class="phone">
        <img src="img/screen3/wallet.png" class="wallet">
        <img src="img/screen3/searchlight&battery.png" class="tourch">
</div>

＆＃13;

＆＃13;

＆＃13;

css

.compass {
 left: 35px;
 bottom: 71px;
 width: 56px;
 margin: auto;
}