JS Drag and Drop that also changes object properties-CodePudding

Im building an EXPRESS app in which I have entries that have the status propery. This status propery determines if the object display appears in one of three columns (ex: if the entry has status of 1, it'll appear in the first column; if it has a status of 2 it'll appear in the second column; and so on...). I wanted to add some drag and drop functionality, which actually work. I can now drag an entry from the first column to the second one and this will remain there. However, since there is no status update, once the page is refreshed the entry will go back to its original column. I have to find a way to change the status of each entry once the dragend event has occured, however, I can't find a solution to update my mongoDB database from the browser side javascript file that I use for the drag and drop functionality. Here is the code:

Drag and Drop JS:

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container__entries");

function getDrapAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll(".draggable:not(.dragging)")];
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if(offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        };
    }, { offset: Number.NEGATIVE_INFINITY }).element;
};

draggables.forEach(draggable => {
    draggable.addEventListener("dragstart", () => {
        draggable.classList.add("dragging");
    });

    draggable.addEventListener("dragend", () => {
        draggable.classList.remove("dragging");
    });
});

containers.forEach(container => {
    container.addEventListener("dragover", e => {
        e.preventDefault();
        const afterElement = getDrapAfterElement(container, e.clientY);
        const draggable = document.querySelector(".dragging");
        if (afterElement == null) {
            container.appendChild(draggable);
        } else {
            container.insertBefore(draggable, afterElement);
        };
    });
});

Here is the HTML, which is the same for all the columns:

<div >
   <% for(let entry of entries) { %> 
      <%- partial('partials/edit', { entry }) %>
      <% if(entry.status == 1) { %>
         <div  draggable="true">
            <!-- Entry Small -->
            <%- partial('partials/entrySmall', { entry }) %>
            <!-- Entry Big -->
            <%- partial('partials/entryBig', { entry }) %>
         </div>
      <% } %>
   <% } %>
</div>

Thank you.

CodePudding user response：

Use fetch with method POST to send data containing information about status to your express server. Like this.

var formData = new FormData();
formData.append('data', data);

fetch("your_url", { method: 'POST', body: formData }).then((res) => res.text().then(res2 => {
   // response
}))
.catch(error => console.log(error)