jQuery UIのDraggableでSortable要素の上を通ると位置ズレ

Question

上記の件で質問です。
下にDraggable要素でキーボードを作り、それをドラッグしSortable要素で作ったマスへ入れるというものを作成しています。
マスはキーとほぼ同じ大きさでスポっと入るような感じです。

上に書いたような基本的な動きは実装できたのですが、
マスが上下にあり、下のキーボードからキーを移動させて上のマスに入れようとしたとき、下のマスの上を通り過ぎるとものすごい位置ズレを起こしてしまいます。
下のマスの上を通らないようにするとうまくいくのですが、直感的な操作を目指して作っているので悩みどころです。

マスの上に重なった時、マスの子要素にキーが入っているのでこうなっているのかな、と思ったのですがよく分からりませんでした。
何か解決策などあれば、よろしくお願い致します。

<div class="main_content">
  <div class="grid_area">
    <div class="grid"></div>
  </div><br>
  <div class="grid_area">
    <div class="grid"></div>
  </div>
</div>

<div class="keybord">
  <div class="key_area">
    <div class="key">A</div>
    <div class="key">B</div>
    <div class="key">C</div>
    <!-- 以下、Zまで続く -->
  </div>
</div>

$(".key").draggable({
  connectToSortable: ".drop",
  revert: "invalid",
  helper: "clone",
  stop: function(event, ui){
    // 移動先にあった子要素を消す
    var par = ui.helper.parent();
    if(par.attr("class") != "key_area"){
      par.empty();
      par.append(ui.helper);
    }
  }
});

$(".grid").sortable({
  // マスにキーを固定
  cancel:".key"
});

---

// 追記
その後自分で色々調べたのですが結局解決はしておりません。
何か代替案でもいいのでお答えいただけませんでしょうか？

Answer 1

自己解決いたしました。
恐らくこのような使い方をこのプラグインでは想定されていないのですね。
原因はなんとなくでしか把握できておりませんが、解決方法を提示します。

$(".key").draggable({
  connectToSortable: ".grid",
  revert: "invalid",
  helper: "clone",

  // 以下、追加
  drag: function(event, ui){
    // helperの位置をキーと同じ位置に指定（基準点）
    $(".key_area").append(ui.helper);
    /* ズレは高さにしか起きない様子なので
       高さにズレが生じた場合、基準点を元に修正する */
    if(ui.offset.top > ui.position.top) ui.position.top = ui.offset.top;
  },
  // 追加ここまで

  stop: function(event, ui){
    // 移動先にあった子要素を消す
    var par = ui.helper.parent();
    if(par.attr("class") != "key_area"){
      par.empty();
      par.append(ui.helper);
    }
  }
});

以上です。何度も同じような質問をしてしまい、申し訳ございませんでした。
同じようにして悩んでいらっしゃる方がいれば参考にしていただければ幸いです。