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”。

那么，只要它们处于同一级别，就可以对列表项进行排序吗？

Answer 1

昨天已经很晚了。我应该使用 event.stopPropagation() 来防止父元素冒泡。