Sortableとdraggable,droppableを両方利用して、ol要素間の入れ替えとol要素内の並べ替えを行いたい

お世話になります。
以下のようなhtmlで、#dataList-A ←→ #dataList-Bの間では、ul要素をdraggable,droppableで入れ替えを行い、#dataList-A内では、ul要素の並び替えができるようにしたいと考えております。

以下は#dataList-A ←→ #dataList-Bのul要素入れ替えが動作している状態です。sortableを組み込むと#dataList-Aの枠から外に移動することができないので、お知恵をお借りしたいです。

html
1<html>
2    <body>
3        <ol id="dataList-A"
4            ondrop="dropItem( event, this ); "
5            ondragover="dropAllowItem( event); "
6            ondragleave="">
7            <ul class="viewitem" id="viewitem_1" draggable="true" ondragstart="dragItem( event );">
8                <li>1</li>
9                <li>項目A</li>
10            </ul>
11            <ul class="viewitem" id="viewitem_2" draggable="true" ondragstart="dragItem( event );">
12                <li>2</li>
13                <li>項目B</li>
14            </ul>
15            <ul class="viewitem" id="viewitem_3" draggable="true" ondragstart="dragItem( event );">
16                <li>3</li>
17                <li>項目C</li>
18            </ul>
19        </ol>
20        <ol id="dataList-B"
21            ondrop="dropItem( event, this ); "
22            ondragover="dropAllowItem( event );" 
23            ondragleave="">
24        </ol>
25    </body>
26</html>

javascript
1function dragItem( $event ) {
2    $event.dataTransfer.setData( "Text", $event.target.id );
3}
4function dropItem( $event, $this ) {
5    $event.preventDefault();
6    var $data = $event.dataTransfer.getData( "Text" );
7    $this.appendChild( document.getElementById( $data ) );
8}
9function dropAllowItem( $event ) {
10    $event.preventDefault();
11}