html-lists - 並べ替え可能なリスト内にグループを配置し、動的リストを追加するときにすべてのリスト要素をシフトします

Question

この機能を実行しようと懸命に努力していますが、どこかまたは他の場所で、全体的なロジックが欠けています。誰かが私を助けたり、案内してくれたりしてくれれば幸いです。質問を 2 つの部分に分けました。

パート1

私は 2 つの並べ替え可能なリストを何度も使用してきましたが、今回は並べ替え可能なリストが 1 つしかないため、条件付き並べ替えを取得していただければ幸いです。.

条件付きソートについては、以下で説明します。

<div id="awesome">
 <ul>
  <li class="alpha">A</li>
  <li class="alpha">D</li>
  <li class="alpha">T</li>
  <li class="math">1</li>
  <li class="math">3</li>
  <li class="math">2</li>
 </ul>
</div> 

上記の例では、ユーザーが 2 つのアルファ リストの間に「数学」リストを持ち込もうとした場合、ユーザーを停止させたいと考えています。それらは、独自のグループ内でのみソート可能にする必要があります。私の例では、ユーザーは 1 の前に 2 を持ってきたり、その逆を行ったりできますが、グループ間です。

パート 2: また、動的アルファ リストを追加する場合は、最後の aplha リストの後に追加する必要があります (これは、クラス名と比較して last() 機能を使用して行うことができます) が、他のすべてのリスト要素をシフトするにはどうすればよいですか?それに応じて右？誰かが削除した場合は、左にシフトします。

これは、プラグインを使用せずに純粋な Jquery で実行できることを知っています。

前もって感謝します。