Simpan kedudukan DIV boleh seret dalam jadual HTML dan simpan ke pangkalan data MySQL

Question

Saya tertanya-tanya jika/bagaimana saya boleh menyimpan kedudukan yang saya alihkan div boleh seret ke atas meja, jadi apabila halaman dimuat semula ia akan kembali ke tempat ia berhenti (dari pangkalan data MySQL). Saya telah membaca beberapa artikel berkaitan, tetapi semuanya tentang menggunakan jquery (acara, ui) dengan AJAX. Ini kod saya: varp=document.getElementsByTagName('p');varchoice=document.getElementsByClassName('cho

P粉729436537 · Answer

Ini mungkin jawapan yang terlalu rumit. Tetapi saya rasa cara terbaik ialah menyimpan module 对象的数组。每个 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:



    
    
    
    test drag & drop 


     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
                    
                
            
            
        
        

    
    sssccc

Untuk mengemas kini pangkalan data, anda boleh mengisih tatasusunan mengikut nilai write 数据库调用。然后每次加载页面时，只需根据 position setiap kali anda mengalihkan modul. Harap ini membantu!