本文详解如何在现有拖拽系统中动态创建带 data-id 的蓝色文本块（如 F6 Text），支持追加、指定位置插入及空内容创建，并确保新元素具备完整的 draggable 行为与样式继承。
本文详解如何在现有拖拽系统中动态创建带 `data-id` 的蓝色文本块（如 `
f6 text
`），支持追加、指定位置插入及空内容创建，并确保新元素具备完整的 draggable 行为与样式继承。在构建交互式内容编排界面时，静态预设文本块往往无法满足灵活配置需求。例如，用户从下拉菜单选择模板后需动态生成对应数量的可拖拽文本项；或在编辑过程中实时新增、调整文本单元。本文提供一套生产就绪的动态 DOM 注入方案，聚焦核心能力：✅ 动态创建结构合规的蓝色文本块 ✅ 精确插入到任意已有元素之后（如 G6 Text 下方） ✅ 支持带文本与空内容两种模式 ✅ 无缝继承 draggable 行为与 CSS 样式 ✅ 避免重复初始化导致的性能问题。
一、基础动态创建：追加到末尾
最简方式是向 #phrase 容器末尾追加新块。关键在于：
- 自动计算下一个
data-id（基于当前子元素数量） - 同步为
<div> 和 <code><span></span>设置data-id - 重新初始化
.words元素的 draggable 行为
// ✅ 推荐：原生 JS + jQuery 混合方案（清晰可控）
const addButton = document.querySelector("#add-blue-box");
addButton.addEventListener("click", () => {
const phrase = document.querySelector("#phrase");
const nextId = phrase.children.length + 1; // 自动递增 ID
// 创建 DOM 结构：<div data-id="X"><span data-id="X" class="words">F6 Text</span></div>
const div = document.createElement("div");
div.dataset.id = nextId;
const span = document.createElement("span");
span.dataset.id = nextId;
span.className = "words";
span.textContent = "F6 Text"; // 可替换为 prompt() 或表单输入值
div.appendChild(span);
phrase.appendChild(div);
// ? 重新激活 draggable（仅作用于新增元素，避免重复绑定）
$(span).draggable({
revert: function(event, ui) {
const bRevertingPhrase = this.closest("#drop-em");
if (!bRevertingPhrase.length) {
const phraseID = $(this).data("id");
const phraseHomeID = $(this).parent().data("id");
if (phraseID !== phraseHomeID) {
$(`#phrase div[data-id="${phraseID}"]`).prepend(this);
}
}
return !event;
}
});
});⚠️ 注意：不要调用
$(".words").draggable()全局重绑——这会导致所有已存在元素重复绑定事件，引发性能下降和行为异常。应只对新创建的<span></span>单独初始化。
二、精准定位插入：在指定元素后添加
若需将 F6 Text 块插入到 G6 Text（data-id="12"）之后，使用 insertAdjacentElement：
// 插入到 data-id="12" 的 div 之后
function insertAfterTarget(textContent = "F6 Text", targetId = 12) {
const phrase = document.querySelector("#phrase");
const targetDiv = phrase.querySelector(`div[data-id="${targetId}"]`);
if (!targetDiv) return;
const nextId = phrase.children.length + 1;
const div = document.createElement("div");
div.dataset.id = nextId;
const span = document.createElement("span");
span.dataset.id = nextId;
span.className = "words";
span.textContent = textContent;
div.appendChild(span);
// ✅ 精准插入：在 targetDiv 之后
targetDiv.insertAdjacentElement("afterend", div);
// 初始化新 span 的 draggable
$(span).draggable({ /* 同上配置 */ });
}
// 调用示例
insertAfterTarget("F6 Text", 12); // 插入到 G6 Text 下方三、创建空文本块与用户输入集成
空块本质是 <span></span> 内容为空，但保留完整结构：
function createEmptyBlock() {
const phrase = document.querySelector("#phrase");
const nextId = phrase.children.length + 1;
const div = document.createElement("div");
div.dataset.id = nextId;
const span = document.createElement("span");
span.dataset.id = nextId;
span.className = "words";
// span.textContent = ""; // 显式留空
div.appendChild(span);
phrase.appendChild(div);
$(span).draggable({ /* draggable 配置 */ });
}用户输入集成方案（推荐）
避免弹窗阻塞体验，改用内联输入控件：
<!-- 在按钮旁添加输入框 --> <div style="display:flex; gap:8px; margin-top:10px;"> <input type="text" id="new-text-input" placeholder="输入文本内容（留空则创建空块）" /> <button id="insert-after-btn">插入到 G6 Text 后</button> <button id="append-btn">追加到末尾</button> </div>
document.getElementById("insert-after-btn").addEventListener("click", () => {
const input = document.getElementById("new-text-input");
const value = input.value.trim();
insertAfterTarget(value || "", 12); // 空字符串即创建空块
input.value = "";
});
document.getElementById("append-btn").addEventListener("click", () => {
const input = document.getElementById("new-text-input");
const value = input.value.trim();
// 追加逻辑（同上 appendChild）
input.value = "";
});四、关键注意事项与最佳实践
-
ID 唯一性保障：始终通过
#phrase.children.length + 1计算新 ID，避免硬编码冲突。 -
事件委托替代重复绑定：长期方案应改用事件委托（如
$("#phrase").on("dragstart", ".words", handler)），但需调整现有revert逻辑以兼容动态元素。 -
CSS 样式继承：新
<div> 和 <code><span></span>已包含data-id与class="words"，因此完全继承原有.words和#phrase > div样式，无需额外定义。 -
无障碍支持：为
<span></span>添加role="button"和tabindex="0"，并监听Enter/Space键触发拖拽（jQuery UI 默认支持）。 -
性能优化：大量动态创建时，使用
DocumentFragment批量插入，再统一激活 draggable。
通过以上方案，你不仅能实现 F6 Text 的动态添加，更能构建一个可扩展的内容编排系统——无论是对接下拉菜单、API 数据，还是支持用户实时编辑，都具备坚实的技术基础。
