DIV Elemente mit Drag and Drop sortieren

Question

Wie kann ich Elemente in einem Div mit Drag and Drop sortieren?

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

Answer 1

Du kannst den Elementen das Attribut "draggable" und einen speziellen Klassennamen geben und mit der HTML Drag and Drop API die Elemente sortieren.

<div class="container">
    <div class="item sortable" draggable="true">Item 1</div>
    <div class="item sortable" draggable="true">Item 2</div>
    <div class="item sortable" draggable="true">Item 3</div>
</div>

<script type="text/javascript>
document.addEventListener('DOMContentLoaded', function() {

    const sortableItems = document.querySelectorAll('.sortable');

    let draggedItem = null;

    sortableItems.forEach(item => {

        item.addEventListener('dragstart', function() {
            draggedItem = this;
            setTimeout(() => this.style.display = 'none', 0);
        });

        item.addEventListener('dragend', function() {
            setTimeout(() => this.style.display = 'block', 0);
        });

        item.addEventListener('dragover', function(e) {
            e.preventDefault();
        });

        item.addEventListener('dragenter', function(e) {
            e.preventDefault();
            this.style.border = '2px dashed #000';
        });

        item.addEventListener('dragleave', function() {
            this.style.border = 'none';
        });

        item.addEventListener('drop', function() {
            if (draggedItem !== this) {
                this.parentNode.insertBefore(draggedItem, this);
                this.style.border = 'none';
            }
            draggedItem = null;
        });

    });

});
</script>

JSFiddle