JS拖放，还可以更改对象属性

Question

我正在构建一个EXPRESS应用程序，其中的条目具有状态属性。这个状态属性决定了对象显示是否显示在三列中的一列中(例如：如果条目的状态为1，它将显示在第一列中；如果它的状态为2，它将出现在第二列中；依此类推…(。我现在可以将条目从第一列拖动到第二列，它将保持不变。但是，由于没有状态更新，一旦刷新页面，条目将返回到其原始列。一旦发生dragend事件，我必须找到一种方法来更改每个条目的状态，然而，我找不到从用于拖放功能的浏览器端javascript文件更新mongoDB数据库的解决方案。这是代码：

拖放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);
};
});
});

这是HTML，它对所有列都是一样的：

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

谢谢。

Answer 1

使用fetch和方法POST将包含状态信息的数据发送到express服务器。就像这样。

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)