域名配置列表加入拖拽排序功能
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user