嵌套的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”。

因此，只要列表項處於同一級別，是否可以對它們進行排序？

Answer 1

昨天很晚。 我應該使用event.stopPropagation（）來防止父元素冒泡。