dragenter executes to often

[Pennywise96]

Hello,
I'm trying to build a sortable list with alpine.

Here is my code:

<div class="drag-and-drop" x-data="sort()">
    <div class="drag-and-drop__container drag-and-drop__container--from">
        <h3 class="drag-and-drop__title">From</h3>
        <ul class="drag-and-drop__items">
            @foreach ($items as $item)
                <li
                    
                    id="item-{{ $item->id }}"
                    class="drag-and-drop__item"
                    :class="{ 'drag-and-drop__item--dragging': dragging }"
                    x-on:dragstart.self="dragstart"
                    x-on:dragenter.self="dragenter"
                    
                    draggable="true"
                    >
                    {{ $item->title }}
                </li>
                
            @endforeach
        </ul>
    </div>
    <div class="drag-and-drop__divider">⇄</div>
    <div class="drag-and-drop__container drag-and-drop__container--to">
        <h3 class="drag-and-drop__title">To</h3>
        <ul class="drag-and-drop__items">

        </ul>
    </div>
</div>
<script>
    window.sort = function () {
        return {
            dragging: false,
            source: null,
            dragenter(e) {
                var targetelem = e.target;
                if (this.isbefore(this.source, targetelem)) {
                    console.log(1);
                    targetelem.parentNode.insertBefore(this.source, targetelem);
                } else {
                    console.log(2);
                    targetelem.parentNode.insertBefore(this.source, targetelem.nextSibling);
                }
            },
            dragstart(e) {
                dragging = true;
                e.dataTransfer.effectAllowed='move';
                e.dataTransfer.setData('text/plain', e.target.id);
                this.source = e.target;
            },
            
            isbefore(a, b) {
                if (a.parentNode == b.parentNode) {
                    for (var cur = a; cur; cur = cur.previousSibling) {
                        if (cur === b) {
                            return true;
                        }
                    }
                }
                return false;
            }
        }
    }
</script>

When I'm dragging a item the dragenter function gets executed over 100 times and the browser crashes. This function should only execute once when I'm dragging a item over a other item. How can i fix this?

[KevinBatdorf]

Maybe you can take something from here: https://codepen.io/KevinBatdorf/pen/PoZeBEv