jquery - jQuery UI ドラッグ/ドロップ、下にスナップ

Question

したがって、この回答に基づいて、ドラッグ/ドロップして所定の位置にスナップできるdivのセットがあります。唯一の問題は、ドラッグ可能な div の高さが異なることです。ターゲットの上部ではなく下部に常にスナップする必要があります。

この JsFiddleでマークアップと私が抱えている問題のデモを見ることができます。

マークアップは次のようになります。

<!-- Slots are droppable targets -->
<div class="devices">
  <div class="slot" id="slot_10">
    <span class="text">Slot 10</span>
  </div>
  <div class="slot" id="slot_9">
    <span class="text">Slot 9</span>
  </div>
  ...
</div>
<!-- .device is draggable -->
<div class="products">
  <div class="device" data-height="2" id="device_1">
    Device 1
  </div>
  <div class="device" data-height="1" id="device_2">
    Device 2
  </div>
  ...
</div>

JS 部分は次のとおりです。

$(function(){
  $('.device').draggable({});
  $('.slot, .products').droppable({
    hoverClass: 'active',
    drop: function(event, ui) {
      console.log("Dropped:",ui.draggable.attr('id'),"on:",$(this).attr('id'));
      $(ui.draggable).detach().css({top:'',left:0,bottom:0}).appendTo(this);
    }
  });
});

ここにCSSがあります

.sample-ui { margin: 40px auto 0; width: 700px; }
.cabinet { width: 335px; float: left; margin-right: 65px; }
.rack { width: 30px; margin-right: 5px; float: left; }
.devices { float: left; width: 300px; }
.bolt, .device, .slot {
  position: relative;
  height: 30px; line-height: 30px; text-align: center; background: #FFF;
  margin-bottom: 5px;
}
.slot { background: #EEE; }
.slot .text { display: block; position: absolute; width: 100%; top: 0; left: 0; }
.active { border: 1px solid #F00; }
.device { z-index: 100; }
.device[data-height="2"] { height: 65px; }
.device[data-height="3"] { height: 100px; }

.catalogue {
  width: 300px; float: left;
}

div が相対位置の div 内の絶対的な下 0 に配置されている場合は、下にスナップする必要があるように思えますが、それは起こっていることではありません。私はここで何を見落としていますか？