jQueryUIのDraggableとDroppableで枠にぴっちりハマるBOXをつくる

jQueryUIのDraggableとDroppable、便利ですがDraggableとDroppableの大きさが同じ場合に
Snapオプションを指定してもぴっちりハマらない。
Revertオプションを指定してもカーソルがDroppable要素の中に入ってさえいれば、許可されてしまうので中途半端な位置に要素がDropされちゃうことがある。
参考：jQueryUI公式のデモ

こういう状態を許したくない

---

以下のような記述でぴっちりするBOXを作れます。

draggable側のオプション

  $(".draggable").draggable({
    snap: ".snaptarget", /* ターゲットにスナップする */
    snapMode: "inner",   /* 内側にスナップする */
    revert: "invalid"    /* Droppableな要素以外にDragされた場合、元の位置に戻る */
  });

droppable側のオプション

$(".snaptarget").droppable({
    drop: function(event, ui) {
     var $srcObj = $(ui.draggable[0]);
     $srcObj.offset($(this).offset());
     return false;
    }
  });

デモ

CODEPEN