域名配置列表加入拖拽排序功能

This commit is contained in:
yinjun.chen1
2026-09-16 18:00:03 +08:00
parent 444167e793
commit d0bab84f89
2 changed files with 47 additions and 0 deletions
+10
View File
@@ -776,6 +776,16 @@ h2 {
border-color: #e94560;
}
.config-item.dragging {
opacity: 0.4;
}
.config-item.drag-over {
border-color: #e94560;
border-style: dashed;
box-shadow: 0 0 0 1px #e94560 inset;
}
.config-info {
flex: 1;
min-width: 0;
+37
View File
@@ -749,9 +749,46 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
let draggedConfigId = null;
configs.forEach((cfg) => {
const item = document.createElement("div");
item.className = "config-item" + (cfg.enabled === false ? " config-disabled" : "");
if (!kw) {
item.draggable = true;
item.addEventListener("dragstart", (e) => {
draggedConfigId = cfg.id;
item.classList.add("dragging");
e.dataTransfer.effectAllowed = "move";
});
item.addEventListener("dragend", () => {
draggedConfigId = null;
item.classList.remove("dragging");
configList.querySelectorAll(".config-item").forEach((el) => el.classList.remove("drag-over"));
});
item.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
if (cfg.id !== draggedConfigId) {
item.classList.add("drag-over");
}
});
item.addEventListener("dragleave", () => {
item.classList.remove("drag-over");
});
item.addEventListener("drop", async (e) => {
e.preventDefault();
item.classList.remove("drag-over");
if (!draggedConfigId || draggedConfigId === cfg.id) return;
const fromIdx = allConfigs.findIndex((c) => c.id === draggedConfigId);
const toIdx = allConfigs.findIndex((c) => c.id === cfg.id);
if (fromIdx === -1 || toIdx === -1) return;
const [moved] = allConfigs.splice(fromIdx, 1);
allConfigs.splice(toIdx, 0, moved);
await saveConfigs(allConfigs);
renderConfigList();
});
}
const info = document.createElement("div");
info.className = "config-info";