Store the position of the draggable DIV in an HTML table and save it to a MySQL database

Question

I'm wondering if/how I can store the position I moved the draggable div to on the table, so when the page reloads it will go back to where it left off (from the MySQL database). I've read some related articles, but they were all about using jquery (events, ui) with AJAX. This is my code: varp=document.getElementsByTagName('p');varchoice=document.getElementsByClassName('cho

P粉729436537 · Answer

This may be an overly complicated answer. But I think the best way is to store an array of module objects in JavaScript. Each module has a position property that needs to be updated every time the module is moved. You can also use the data html attribute to store the position of the element itself on the element (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). This is my 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

To update the database, you can make a write database call every time you move a module. Then every time the page loads, just sort the array based on the position value. Hope this helps!

Store the position of the draggable DIV in an HTML table and save it to a MySQL database

reply all(1)I'll reply

it's just a test for js