Ini mungkin jawapan yang terlalu rumit. Tetapi saya rasa cara terbaik ialah menyimpan module 對象的數(shù)組。每個 module 都有一個 position 屬性，每次移動模塊時都需要更新該屬性。您還可以使用 data atribut html dalam JavaScript untuk menyimpan kedudukan elemen itu sendiri pada elemen (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ). Ini kod saya:

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

Untuk mengemas kini pangkalan data, anda boleh mengisih tatasusunan mengikut nilai write 數(shù)據(jù)庫調(diào)用。然后每次加載頁面時，只需根據(jù) position setiap kali anda mengalihkan modul. Harap ini membantu!