Drag-and-Drop Beispiel

Vollständige HTML-Code:

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