javascript - ネストされた html5 ドラッグ可能なアイテム

Question

HTML5 のドラッグ可能な項目について質問があります。私はこの例を見てきました: https://codepen.io/retrofuturistic/pen/tlbHE

カスタマイズして親をドラッグ可能にすると

<ul>
    <li draggable="true" class="parent-li">
        <ul id="columns-1">
            <li class="column child-li" draggable="true"><header>A</header></li>
            <li class="column child-li" draggable="true"><header>B</header></li>
        </ul>
    </li>
    <li draggable="true" class="parent-li">
        <ul id="columns-2" draggable="true">
            <li class="column child-li" draggable="true"><header>A</header></li>
            <li class="column child-li" draggable="true"><header>B</header></li>
        </ul>
    </li>
</ul>

リストアイテム「child-li」をソートしようとすると、「parent-li」をドラッグしようとすることがわかりました

this.parentNode.removeChild(dragSrcEl);

dragSrcEl は this.parentNode: 「parent-li」と同じです。

同じレベルにある限り、リスト項目をソートすることは可能ですか?