将将可拖动DIV的位置存储在HTML表格中，并保存到MySQL数据库中

Question

我想知道我是否/如何能够存储我将可拖动div移动到表格上的位置，因此当页面重新加载时，它将返回到离开的位置（来自MySQL）数据库）。我读过一些相关文章，但都是关于将jquery（事件、ui）与AJAX结合使用的。这是我的代码：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; 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

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