嵌套的html5可拖动项

Question

I have a questions about html5 draggable items. I've been looking at this example: https://codepen.io/retrofuturistic/pen/tlbHE

If I customize it and make the parents draggable

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

it turns out that when you are trying to sort a list-item "child-li" it tries to drag "parent-li"

this.parentNode.removeChild(dragSrcEl);

the dragSrcEl is the same as this.parentNode: the "parent-li".

So is it possible to sort the list-items as long as they're on the same level?

Answer 1

It was late yesterday. I should use event.stopPropagation() to prevent bubbling up on parent elements.