Speichern Sie die Position des ziehbaren DIV in einer HTML-Tabelle und speichern Sie sie in einer MySQL-Datenbank

Question

Ich frage mich, ob/wie ich die Position, an die ich das ziehbare Div in der Tabelle verschoben habe, speichern kann, damit die Seite beim erneuten Laden an die Stelle zurückkehrt, an der sie aufgehört hat (aus der MySQL-Datenbank). Ich habe einige verwandte Artikel gelesen, in denen es jedoch ausschließlich um die Verwendung von JQuery (Ereignissen, Benutzeroberfläche) mit AJAX ging. Das ist mein Code: varp=document.getElementsByTagName('p');varchoice=document.getElementsByClassName('cho

P粉729436537 · Answer

这可能是一个过于复杂的答案。但我觉得最好的方法是在 JavaScript 中存储 module 对象的数组。每个 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) {
        //Module is moving down the list
        console.log(position)
        console.log(module.position)
        for (let i = module.position; i < position; i++) {
            modules[i] = modules[i + 1];
            modules[i].position = i
        }
    } else {
        //Module is moving up the list
        for (let i = module.position - 1; i > 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

要更新数据库，您可以在每次移动模块时进行 write 数据库调用。然后每次加载页面时，只需根据 position 值对数组进行排序即可。希望这有帮助！

Speichern Sie die Position des ziehbaren DIV in einer HTML-Tabelle und speichern Sie sie in einer MySQL-Datenbank

Antworte allen(1)Ich werde antworten

it's just a test for js