jquery - jQuery: ソート可能にドラッグ可能に接続します。ドラッグ可能なアイテムには、ソート可能なリストとは異なる DOM があります

Question

アイテムをソート可能にドラッグできるようになりました。しかし、ソート可能なリストには別の DOM があります。

<!-- The draggable items. Has the "original" DOM in the LI tags. -->
<ul class="draggable_text">
    <li><span>DRAG THIS A</span></li>
    <li><span>DRAG THIS B</span></li>
</ul>


<!-- This list has a different DOM in the LI tags -->
<ul id="stagerows">
    <li><p>This is a new DOM dragged from "DRAG THIS A"</p></li>
    <li><p>This is a new DOM dragged from "DRAG THIS B"</p></li>
</ul>

$(document).ready(function() {
    $('.draggable_text > li').draggable({
        //helper:'clone',
        helper: function(event, ui) {
            return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>';
        },
        connectToSortable:'#stagerows'
    });

    $('#stagerows').sortable({
        handle: '.drag_handle'
    });
});

ヘルパーには次のものがあります: xxx これはソート可能にドロップする必要があります...

「ヘルパー」が機能します。しかし、アイテムをソート可能に「ドロップ」すると、「元の」DOMに戻ります。「新しく作成されたDOM」（ヘルパーで作成されたもの）をソート可能にドロップしたいと思います。

私が理にかなっていることを願っています。ありがとうございました！

別の言い方をすると、リンゴをドラッグするとオレンジ色に変わります。でも、落とすとまたりんごに…。