【jQueryUI Sortable】要素の外側から並べ替えたい

Question

現在jQueryUIのSortableを使ってアプリを作っています。

内容としては、上下に大きなボックスがあり、そのそれぞれの上に小さな要素(テキストボックス)が複数あります。
それをconnectwithで双方向に行き来させます。

そこで
質問があるのですが、

下から上に要素を移動させる時、
要素の最後尾の右に配置するだけで、
上の要素たちに組み込むことは方法はあるでしょうか？

というのもSortableの機能上、
一度要素の間に挿入したり、
最後尾の要素に今移動させている要素を触れさせたりしないと、並べ替えが起こらないように思うのです。

それをなんとかして、最後尾の右に配置するだけで要素群に組み込みたいと思います。

もし何かいい方法を知っている方がいればよろしくお願い致します。

Answer 1

説明だけでなく、実際に要素を並べたサンプルコードがあるとこちらでも試しやすいので答えやすいです。
「思う」ということは実際に試されてはいないのでしょうか？

floatを使って横並びにした場合、最後尾の余白部分にドラッグして追加できました。

<ul class="connectedSortable">
  <li><div class="item ui-state-default">Item 1</div></li>
  <li><div class="item ui-state-default">Item 2</div></li>
  <li><div class="item ui-state-default">Item 3</div></li>
  <li><div class="item ui-state-default">Item 4</div></li>
  <li><div class="item ui-state-default">Item 5</div></li>
</ul>
 
<ul class="connectedSortable">
  <li><div class="item ui-state-highlight">Item 1</div></li>
  <li><div class="item ui-state-highlight">Item 2</div></li>
  <li><div class="item ui-state-highlight">Item 3</div></li>
  <li><div class="item ui-state-highlight">Item 4</div></li>
  <li><div class="item ui-state-highlight">Item 5</div></li>
</ul>

.connectedSortable {
    width: 500px;
    border: 1px solid #eee;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 10px;
  }

.connectedSortable:after {
  content: '';
  display: block;
  clear: both;
}

.connectedSortable li {
  padding: 10px;
  float: left;
}

.item{
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

$('.connectedSortable').sortable({
  connectWith: ".connectedSortable"
}).disableSelection();

Comments

[k499778]

yamamoto_hikawaさん回答ありがとうございます。

もちろん試しました。
そして仕事で作った時はうまくいかなかったのですが、
家でやってみると私もうたくいきました。
なので現在その仕事と家での差分を見て何が違うのか検証しているのですが、なかなか見つからない状況です。

もちろん仕事の方はシンプルな作りではなく、いろんなイベントがあったり、他のCSSが絡んでいたりと複雑になっています。

仕事の内容というのもあって、詳しいデザインや踏み込んだ内容を載せることができませんでした。

実際にこの添付して下さったコードも試して検証し、ヒントにつなげたいと思います。
ありがとうございました。