如何实现删除顶部/中间textDiv后下方元素自动调整位置？

问题背景 #

这段基于jQuery的代码支持通过回车或粘贴多行文本生成带删除按钮的textDiv，但存在缺陷：删除顶部或中间的textDiv时，下方的textDiv无法自动上移填补空缺。

修改思路 #

问题根源在于所有textDiv使用绝对定位，创建时手动设置top值，但删除中间元素后，未重新计算并更新下方所有元素的位置。解决方案是新增一个重新排列所有textDiv的函数，每次删除元素后调用该函数，遍历所有textDiv并依次计算它们的top位置，同时更新输入框的位置。

修改后完整代码 #

JavaScript部分 #

// 重新排列所有textDiv的位置
function rearrangeTextDivs() {
  let currentTop = $(".container").position().top;
  const leftPos = $(".container").position().left;
  const gap = 2; // 元素间的间距

  $(".textDiv").each(function(index) {
    $(this).css({
      top: currentTop,
      left: leftPos
    });
    currentTop += $(this).outerHeight() + gap;
  });

  // 更新输入框位置
  const lastDiv = $(".textDiv").last();
  if (lastDiv.length) {
    $(".textInput").css({
      top: lastDiv.position().top + lastDiv.outerHeight() + gap,
      left: leftPos
    });
  } else {
    $(".textInput").css({
      top: currentTop,
      left: leftPos
    });
  }
}

// 创建新textDiv并添加到容器
function createTextDiv(text) {
  if (text.trim() != "") {
    var textDiv = $("<div class='textDiv'></div>").text(text.trim());
    var removeButton = $("<button class='removeButton'>X</button>");
    removeButton.on("click", function() {
      $(this).parent().remove();
      rearrangeTextDivs(); // 删除后重新排列元素
      $(".textInput").prop("disabled", false);
    });
    textDiv.append(removeButton);
    $(".container").append(textDiv);
    rearrangeTextDivs(); // 创建后重新排列元素
    $(".textInput").val("");
    $(".textInput").prop("disabled", false);
  }
}

// 监听输入框按键事件
$(".textInput").on("keydown", function(e) {
  if (e.keyCode == 13 || e.keyCode == 188) {
    e.preventDefault();
    createTextDiv($(this).val());
  } else if (e.keyCode == 8 && $(this).val().length == 0) {
    e.preventDefault();
    var lastDiv = $(".textDiv").last();
    if (lastDiv.length) {
      lastDiv.remove();
      rearrangeTextDivs(); // 删除最后一个元素后重新排列
    }
    $(".textInput").prop("disabled", false);
  }
});

// 监听容器粘贴事件
$(".container").on("paste", function(e) {
  e.preventDefault();
  var pastedText = e.originalEvent.clipboardData.getData("text");
  var lines = pastedText.split(/\r\n|\r|\n/);
  for (var i = 0; i < lines.length; i++) {
    createTextDiv(lines[i]);
  }
});

// 初始化输入框位置
$(function() {
  rearrangeTextDivs();
});

CSS部分 #

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
  overflow: auto;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

.container::-webkit-scrollbar {
  width: 8px;
}

.container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 10px;
}

.container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  padding: 5px;
  background-color: #E1ECF4;
  border: 1px solid #B0CBE3;
  border-radius: 3px;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 2px;
  max-width: 95%;
  word-wrap: break-word;
  line-height: 1.5;
  cursor: default;
  vertical-align: top;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.removeButton {
  display: inline-block;
  padding: 0px 5px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  line-height: 1;
  background-color: transparent;
  border: none;
  vertical-align: top;
  font-family: Arial, Helvetica, sans-serif;
}

.removeButton:hover {
  color: #000;
}

.textInput {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px;
  background-color: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <textarea class="textInput"></textarea>
</div>

关键修改点 #

• 新增rearrangeTextDivs()函数：遍历所有textDiv，依次计算每个元素的top位置，确保元素连续排列无空隙
• 删除元素后立即调用rearrangeTextDivs()，触发重新排列
• 简化createTextDiv()中的位置计算逻辑，创建元素后直接调用重新排列函数，避免手动计算带来的误差
• 初始化时调用rearrangeTextDivs()，确保输入框初始位置正确

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