Razvrščljiv seznam - Drag and Drop s CSS in JavaScript

Razvrščljivi seznami omogočajo uporabnikom preprosto prerazporejanje elementov z drag and drop funkcionalnostjo. V tem primeru prikazujemo, kako ustvariti interaktivni seznam, kjer lahko elementi spreminjajo svojo pozicijo s preprostim povleci-in-spusti.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Razvrščljiv seznam - Primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="sortable-list-container">
        <div class="sortable-list-box">
            <h3>Sortable List - Razvrščljiv seznam</h3>
            <p class="sortable-list-subtitle">Povleci in spusti elemente za spreminjanje vrstnega reda</p>
        
            <ul id="sortableList" class="sortable-list-ul">
                <li class="sortable-list-li" draggable="true">Prva postavka</li>
                <li class="sortable-list-li" draggable="true">Druga postavka</li>
                <li class="sortable-list-li" draggable="true">Tretja postavka</li>
                <li class="sortable-list-li" draggable="true">Četrta postavka</li>
                <li class="sortable-list-li" draggable="true">Peta postavka</li>
            </ul>
        
            <div class="sortable-list-info">
                💡 Uporabi miško ali dolg pritisk na dotik za premikanje elementov
            </div>
        </div>
    </div>
</body>
</html>
        
                    

                        .sortable-list-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 30px 15px;
    background-color: var(--bg, #f8fafc);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.sortable-list-box {
    width: 100%;
    max-width: 480px;
    background-color: var(--card, #ffffff);
    padding: 30px;
    border-radius: 14px;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}

.sortable-list-box h3 {
    color: var(--fg, #1e293b);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.sortable-list-subtitle {
    text-align: center;
    color: var(--fg, #64748b);
    opacity: 0.85;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.sortable-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Modern razmik namesto maržinov */
}

.sortable-list-li {
    background: var(--card, #ffffff);
    color: var(--fg, #334155);
    border: 1px solid var(--border, #e2e8f0);
    padding: 14px 18px;
    border-radius: 10px;
    cursor: grab; /* Spremenjeno v "grab" za lepši občutek roke */
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    font-weight: 500;
}

/* Aktivno stanje prijemanja elementa */
.sortable-list-li:active {
    cursor: grabbing;
}

/* Moderen indikator za vlečenje (tri črtice) */
.sortable-list-li:before {
    content: "⋮⋮";
    margin-right: 15px;
    font-size: 14px;
    color: #94a3b8;
    letter-spacing: 1px;
}

.sortable-list-li:hover {
    border-color: var(--accent, #007bff);
    background-color: rgba(0, 123, 255, 0.02);
    color: red;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Element, ki ga trenutno vlečemo */
.sortable-list-li.sortable-list-dragging {
    opacity: 0.4;
    background-color: var(--bg, #f1f5f9) !important;
    border: 1px dashed var(--accent, #007bff);
    box-shadow: none;
    transform: scale(0.98);
}

/* Vizualni indikator ciljnega mesta spusta */
.sortable-list-li.sortable-list-drag-over {
    border-top: 2px solid var(--accent, #007bff);
    background-color: rgba(0, 123, 255, 0.04);
}

.sortable-list-info {
    background-color: rgba(0, 123, 255, 0.06);
    color: var(--accent, #007bff);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}
        
                    

                        // Celoten skript varno ovijemo v DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() {
    const sortableList = document.getElementById('sortableList');
    if (!sortableList) return;

    const items = sortableList.querySelectorAll('.sortable-list-li');
    let draggedItem = null;

    items.forEach(item => {
        // Ko začnemo vlečenje
        item.addEventListener('dragstart', function() {
            draggedItem = this;
            // Kratek zamik zagotovi, da se stil doda šele po tem, ko brskalnik ustvari sliko za vlečenje
            setTimeout(() => this.classList.add('sortable-list-dragging'), 0);
        });

        // Ko končamo vlečenje
        item.addEventListener('dragend', function() {
            this.classList.remove('sortable-list-dragging');
            draggedItem = null;
        });

        // Ko element preletimo čez drugi element
        item.addEventListener('dragover', function(e) {
            e.preventDefault(); // Nujno potrebno za omogočanje spusta (drop)
        });

        // Ko element vstopi v območje drugega elementa
        item.addEventListener('dragenter', function(e) {
            e.preventDefault();
            if (this !== draggedItem) {
                this.classList.add('sortable-list-drag-over');
            }
        });

        // Ko element zapusti območje drugega elementa
        item.addEventListener('dragleave', function() {
            this.classList.remove('sortable-list-drag-over');
        });

        // Ko spustimo element
        item.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('sortable-list-drag-over');
            
            if (this !== draggedItem && draggedItem !== null) {
                // Pridobimo posodobljen seznam elementov za natančen izračun indeksov
                let allItems = [...sortableList.querySelectorAll('.sortable-list-li')];
                let draggedIndex = allItems.indexOf(draggedItem);
                let targetIndex = allItems.indexOf(this);

                if (draggedIndex < targetIndex) {
                    // Če premikamo element navzdol, ga vstavimo za ciljnim elementom
                    this.parentNode.insertBefore(draggedItem, this.nextSibling);
                } else {
                    // Če premikamo element navzgor, ga vstavimo pred ciljnim elementom
                    this.parentNode.insertBefore(draggedItem, this);
                }
            }
        });
    });
});
        
                    

REZULTAT

Razvrščljiv seznam - Drag and Drop

Vadnica.org

Povezave

Podpora