JavaScript拖拽功能问题：同UL列表放置元素如何不自动跳转至底部

我们只需要新增两个变量记录拖拽元素的原始位置信息，再修改放置逻辑即可实现需求，修改后的完整代码如下：

var li = document.getElementsByTagName('li');
var ziel = document.getElementsByClassName('ziel');
var dragItem = null;
// 新增两个变量记录原始位置信息
var originParent = null;
var originIndex = null;

for (var i of li) {
  // 若HTML中li已设置draggable="true"可删除下一行
  i.setAttribute('draggable', true);
  i.addEventListener('dragstart', dragStart);
  i.addEventListener('dragend', dragEnd);
}

function dragStart() {
  dragItem = this;
  // 记录原始父容器和原始索引
  originParent = this.parentElement;
  originIndex = Array.from(originParent.children).indexOf(this);
  setTimeout(() => (this.style.display = 'none'), 0);
}

function dragEnd() {
  setTimeout(() => (this.style.display = 'block'), 0);
  // 重置所有记录变量
  dragItem = null;
  originParent = null;
  originIndex = null;
}

for (j of ziel) {
  j.addEventListener('dragover', dragOver);
  j.addEventListener('dragenter', dragEnter);
  j.addEventListener('drop', Drop);
}

function Drop() {
  // 判断当前放置的容器是否是原始父容器
  if (this === originParent) {
    // 是则插回原始位置
    this.insertBefore(dragItem, this.children[originIndex]);
  } else {
    // 不是则追加到末尾
    this.append(dragItem);
  }
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
}

核心逻辑说明 #

• 拖拽触发时记录拖拽元素的原始所属父容器、以及在父容器子节点中的索引位置
• 元素放置时先判断目标容器是否为原始父容器：如果是则通过insertBefore方法将元素插回原始索引位置；如果是其他容器则保持追加到末尾的原有逻辑
• 拖拽结束后重置所有记录变量，避免影响后续拖拽操作

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