這可能是一個過于復(fù)雜的答案。但我覺得最好的方法是在 JavaScript 中存儲 module 對象的數(shù)組。每個 module 都有一個 position 屬性，每次移動模塊時都需要更新該屬性。您還可以使用 data html 屬性來存儲元素本身在元素上的位置(https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes）。這是我的代碼：

Javascript：

var dragItem = null;
let modules = loadDataFromServer();

//Initial UI
updateUI(modules);


function dragStart() {
    console.log("Start")
    dragItem = this;
    setTimeout(() => this.style.display = "none", 0);
}
function dragEnd() {
    console.log("End")
    setTimeout(() => this.style.display = "block", 0);
    dragItem = null;
}

function Drop() {
    console.log("Drop")
    console.log(dragItem)
    this.append(dragItem);
    moveModuleTo(modules.length - 1, modules[dragItem.dataset.position])
}
function dragOver(e) {
    e.preventDefault();
    this.style.border = "2px dotted cyan";
}
function dragEnter(e) {
    e.preventDefault();
}
function dragLeave(e) {
    this.style.border = "none";
}

//Added Code

function loadDataFromServer() {
    //return an array of modules
    return [
        {
            title: "Module 1",
            position: 0
        },
        {
            title: "Module 2",
            position: 1
        },
        {
            title: "Module 3",
            position: 2
        },
        {
            title: "Module 4",
            position: 3
        },
        {
            title: "Module 5",
            position: 4
        },
    ]
}

function moveModuleTo(position, module) {
    if (module.position  position; i--) {
            modules[i] = modules[i - 1]
            modules[i].position = i + 1;
        }
    }
    modules[position] = module
    modules[position].position = position
    console.log(modules)
    //Update UI and database
    updateUI(modules)
}

function updateUI(modules) {
    let choice = document.getElementsByClassName('choice');

    //Remove old Modules
    const draggableContainer = document.getElementById("draggableContainer")
    while (draggableContainer.firstChild) {
        draggableContainer.removeChild(draggableContainer.lastChild)
    }

    //Add updated Modules
    modules.forEach(item => {
        console.log("yeet")
        let newDraggableItem = document.createElement('p')
        newDraggableItem.innerHTML = `${item.title}`
        newDraggableItem.draggable = true
        newDraggableItem.dataset.position = item.position
        draggableContainer.appendChild(newDraggableItem);
    });

    //ReAdd Event listeners

    var p = document.getElementsByTagName('p');

    for (var i of p) {
        i.addEventListener('dragstart', dragStart);
        i.addEventListener('dragend', dragEnd);
    }

    for (j of choice) {
        j.addEventListener('dragover', dragOver);
        j.addEventListener('dragenter', dragEnter);
        j.addEventListener('dragleave', dragLeave);
        j.addEventListener('drop', Drop);
    }
}

HTML：

    
    
    
    


    
 it's just a test for js 
    

        
            

                

                    
time
                    
DIM
                    
LUN
                
                

                    
8:00 - 9:00
                    

                        
 S1-1
                    
                    

                        
S1-2
                    
                
                

                    
9:00 - 10:00
                    

                        
S2-1
                    
                    

                        
S2-2
                    
                
            
            save
        
        


    
    sssccc

要更新數(shù)據(jù)庫，您可以在每次移動模塊時進行 write 數(shù)據(jù)庫調(diào)用。然后每次加載頁面時，只需根據(jù) position 值對數(shù)組進行排序即可。希望這有幫助！