从左侧拖拽dom 到右侧，未释放时添加占位dom会报错DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.，怎么解决

这个报错是因为在执行 `insertBefore` 方法时，指定的插入位置不是当前父节点的子节点。这通常是由于占位 DOM 的插入位置计算错误导致的。解决这个问题的方法是在插入占位 DOM 之前，先判断插入位置是否是当前父节点的子节点，如果不是，则将其调整为正确的位置。

具体的实现步骤如下：

1. 获取占位 DOM 的插入位置，通常是当前拖拽元素的下一个兄弟节点。

2. 判断插入位置是否是当前父节点的子节点。如果不是，则将插入位置调整为当前父节点的最后一个子节点。

3. 在调整后的插入位置前插入占位 DOM。

示例代码如下：

// 获取拖拽元素和目标元素
const dragElement = document.getElementById('drag');
const targetElement = document.getElementById('target');

// 创建占位 DOM
const placeholderElement = document.createElement('div');
placeholderElement.className = 'placeholder';

// 绑定 ondragover 事件处理函数
targetElement.ondragover = function(event) {
  // 防止浏览器默认的拖拽行为
  event.preventDefault();

  // 获取占位 DOM 的插入位置
  const nextSibling = getNextSibling(event.target);

  // 判断插入位置是否是当前父节点的子节点
  if (targetElement.contains(nextSibling)) {
    // 在插入位置前插入占位 DOM
    targetElement.insertBefore(placeholderElement, nextSibling);
  } else {
    // 将插入位置调整为当前父节点的最后一个子节点
    targetElement.appendChild(placeholderElement);
  }
};

// 获取下一个兄弟节点
function getNextSibling(node) {
  let nextSibling = node.nextSibling;
  while (nextSibling && nextSibling.nodeType !== 1) {
    nextSibling = nextSibling.nextSibling;
  }
  return nextSibling;
}

在上面的代码中，我们通过 `getNextSibling` 函数获取拖拽元素当前的下一个兄弟节点，然后判断其是否是当前父节点的子节点。如果是，则在其前插入占位 DOM；如果不是，则将插入位置调整为当前父节点的最后一个子节点。这样就可以避免在插入占位 DOM 时出现上述报错。