Drag-and-Drop Beispiel

Hier ist der vollständige HTML-Code, wie angefragt:

    < link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    < style>
        .list-group-item {
            cursor: move;
        }
    < /style>
< /head>
< body>
    < div class="container mt-5">
        < h2 >Drag-and-Drop Beispiel< /h2>
        < ul id="sortable" class="list-group">
            @foreach($items as $item)
            < li class="list-group-item" data-id="{{ $item->id }}">{{ $item->name }}
            @endforeach
        < /ul>
        < button id="saveOrder" class="btn btn-primary mt-3">Reihenfolge speichern< /button>
    < /div>

    < script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">< /script>
    < script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">< /script>
    < script>
        document.addEventListener('DOMContentLoaded', (event) => {
            let sortable = document.getElementById('sortable');
            new Sortable(sortable, {
                animation: 150,
                onEnd: function () {
                    const order = Array.from(sortable.children).map(item => item.dataset.id);
                    fetch('{{ route("saveOrder") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ order: order })
                    }).then(response => response.json()).then(data => {
                        alert('Reihenfolge gespeichert!');
                    });
                }
            });
        });

        class Sortable {
            constructor(element, options) {
                this.element = element;
                this.options = options;
                this.init();
            }

            init() {
                let draggingEle;
                let placeholder;
                let x = 0;
                let y = 0;

                const mouseDownHandler = function (e) {
                    draggingEle = e.target;
                    const rect = draggingEle.getBoundingClientRect();
                    x = e.clientX - rect.left;
                    y = e.clientY - rect.top;

                    placeholder = document.createElement('li');
                    placeholder.className = 'list-group-item';
                    placeholder.style.height = `${rect.height}px`;

                    draggingEle.style.width = `${rect.width}px`;
                    draggingEle.style.position = 'absolute';
                    draggingEle.style.zIndex = '1000';

                    document.body.appendChild(draggingEle);
                    document.addEventListener('mousemove', mouseMoveHandler);
                    document.addEventListener('mouseup', mouseUpHandler);
                };

                const mouseMoveHandler = function (e) {
                    draggingEle.style.left = `${e.clientX - x}px`;
                    draggingEle.style.top = `${e.clientY - y}px`;

                    const draggingRect = draggingEle.getBoundingClientRect();
                    const siblings = [...sortable.children].filter((child) => child !== draggingEle && child !== placeholder);

                    siblings.forEach((sibling) => {
                        const siblingRect = sibling.getBoundingClientRect();
                        if (draggingRect.top < siblingRect.top + siblingRect.height / 2) {
                            sortable.insertBefore(placeholder, sibling);
                        } else {
                            sortable.insertBefore(placeholder, sibling.nextSibling);
                        }
                    });
                };

                const mouseUpHandler = function () {
                    placeholder.parentNode.insertBefore(draggingEle, placeholder);
                    placeholder.parentNode.removeChild(placeholder);

                    draggingEle.style.removeProperty('width');
                    draggingEle.style.removeProperty('position');
                    draggingEle.style.removeProperty('top');
                    draggingEle.style.removeProperty('left');
                    draggingEle.style.removeProperty('z-index');

                    x = 0;
                    y = 0;
                    draggingEle = null;
                    placeholder = null;

                    document.removeEventListener('mousemove', mouseMoveHandler);
                    document.removeEventListener('mouseup', mouseUpHandler);

                    if (typeof options.onEnd === 'function') {
                        options.onEnd();
                    }
                };

                [...sortable.children].forEach(function (item) {
                    item.addEventListener('mousedown', mouseDownHandler);
                });
            }
        }
    < /script>

### Zusammenfassung

In diesem HTML-Code verwenden wir Bootstrap 5 für das Styling und erstellen eine benutzerdefinierte `Sortable`-Klasse für die Drag-and-Drop-Funktionalität. Wir implementieren auch eine Fetch-API-Aufruf, um die neue Reihenfolge der Elemente an den Laravel-Backend zu senden. Wenn du weitere Anpassungen oder Fragen hast, lass es mich wissen!