lima-city: Webhosting, Domains und Cloud
2 Pluspunkte 0 Minuspunkte

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

1 Antwort

0 Pluspunkte 0 Minuspunkte

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

von (718 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

261 Kommentare

13 Nutzer