如何在拖拽交互系统中动态添加蓝色文本/空div组件？

现有功能 #

• 已实现点击按钮将左侧蓝色文本框移入右侧方格的交互逻辑

待实现需求 #

• 在G6 Text下方的指定位置，动态生成包含F6 Text文本的蓝色div
• 动态生成空的蓝色div

方案咨询与解决建议 #

之前尝试textarea嵌入div的方案不可行，针对文本输入生成div的需求，给出两种实用方案：

1. 弹窗输入方案（简单直接） #

用原生弹窗或自定义模态框获取用户输入，确认后生成对应div：

// 示例：原生prompt获取文本并生成div
function addTextDiv() {
  const inputText = prompt('请输入div文本内容：');
  if (inputText !== null) {
    const newDiv = document.createElement('div');
    newDiv.className = 'blue-box';
    newDiv.textContent = inputText;
    // 插入到G6 Text下方的目标容器
    document.querySelector('.g6-text-container').appendChild(newDiv);
  }
}

2. 页面输入框方案（体验更优） #

在页面合适位置添加输入框+确认按钮，无需弹窗打断操作：

<!-- 页面新增输入区域 -->
<div class="input-controls">
  <input type="text" id="divTextInput" placeholder="输入div文本">
  <button onclick="createTextDiv()">生成带文本的蓝色Div</button>
  <button onclick="createEmptyDiv()">生成空蓝色Div</button>
</div>

// 生成带文本的div
function createTextDiv() {
  const inputVal = document.getElementById('divTextInput').value.trim();
  const targetContainer = document.querySelector('.g6-text-container');
  const newDiv = document.createElement('div');
  newDiv.className = 'blue-box';
  newDiv.textContent = inputVal || 'F6 Text'; // 无输入时默认填充F6 Text
  targetContainer.appendChild(newDiv);
  // 清空输入框
  document.getElementById('divTextInput').value = '';
}

// 生成空的蓝色div
function createEmptyDiv() {
  const newDiv = document.createElement('div');
  newDiv.className = 'blue-box';
  // 插入到左侧待移入容器
  document.querySelector('.left-container').appendChild(newDiv);
}

核心注意事项 #

• 确保目标容器（如.g6-text-container、.left-container）的DOM选择器准确，避免找不到元素
• 预定义好.blue-box的CSS样式（背景色、宽高、内边距等），保证生成的div样式统一

内容的提问来源于stack exchange，提问作者Tan