我正在构建一个EXPRESS应用程序,其中包含具有status属性的条目。此status属性确定对象显示是否出现在三列之一中(例如:如果条目的状态为1,它将出现在第一列;如果它的状态为2,它将出现在第二列中;等等......)。我想添加一些拖放功能,这些功能实际上是有效的。我现在可以将条目从第一列拖到第二列,并且该条目将保留在第二列。但是,由于没有状态更新,因此一旦页面刷新,条目将返回到其原始列。我必须找到一种方法,在dragend事件发生后更改每个条目的状态,但是,我找不到一个解决方案来更新我的mongoDB数据库从浏览器端的javascript文件,我使用的拖放功能。下面是代码:
拖放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,所有列的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>
- 谢谢-谢谢
1条答案
按热度按时间q9rjltbz1#
使用
fetch
和POST
方法将包含状态信息的数据发送到express
服务器。