Stockez la position du DIV déplaçable dans un tableau HTML et enregistrez-le dans une base de données MySQL

Question

Je me demande si/comment je peux stocker la position vers laquelle j'ai déplacé le div déplaçable sur la table, donc lorsque la page se rechargera, elle reviendra là où elle s'était arrêtée (à partir de la base de données MySQL). J'ai lu quelques articles connexes, mais ils concernaient tous l'utilisation de jquery (événements, interface utilisateur) avec AJAX. Voici mon code : varp=document.getElementsByTagName('p');varchoice=document.getElementsByClassName('cho

P粉729436537 · Answer

Cela peut être une réponse trop compliquée. Mais je pense que le meilleur moyen est de stocker module 对象的数组。每个 module 都有一个 position 属性，每次移动模块时都需要更新该属性。您还可以使用 data les attributs html en JavaScript pour stocker la position de l'élément lui-même sur l'élément (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ). Voici mon code :

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
                    
                
            
            
        
        

    
    sssccc

Pour mettre à jour la base de données, vous pouvez simplement trier le tableau par write 数据库调用。然后每次加载页面时，只需根据 position valeur à chaque fois que vous déplacez le module. J'espère que cela t'aides!

Stockez la position du DIV déplaçable dans un tableau HTML et enregistrez-le dans une base de données MySQL

répondre à tous(1)je répondrai

it's just a test for js