javascript - HTML5 拖放占位符在离开时将parentNode 设置为 null (js vanilla)

Question

我正在尝试为我自己的网站创建一个编辑器(基于 contentEditables 和 HTML5 拖放功能)。

这是 fiddle :https://jsfiddle.net/5bw320zo/1/请注意，代码很乱，这只是一个 POC

<小时/>

问题:

每次我悬停占位符时，占位符的parentNode似乎都被设置为null。

Uncaught TypeError: Cannot read property 'removeChild' of null at _detach at HTMLDivElement._handleDragLeave

<小时/>

代码说明:

我在初始化时创建了一个简单的 div 元素:

placeholder = d.createElement('div');
placeholder.setAttribute('style', 'height: 25px; background-color: red;');

每个容器都有自己的事件:

_on(elements, 'dragenter', _handleDragEnter);
_on(elements, 'dragover', _handleDragOver);
_on(elements, 'dragleave', _handleDragLeave);
_on(elements, 'drop', _handleDrop);

悬停时，我检查它是否有子元素，如果没有，我只需附加该元素，否则我在之前或之后添加元素(取决于鼠标高度的位置):

function _handleDragOver(e) {
  var targetBoundingBox,
    targetMouseY;

  targetBoundingBox = e.target.getBoundingClientRect();
  targetMouseY = e.pageY - targetBoundingBox.top;

  if (e.target.hasChildNodes()) {
    // TODO check Y axis (/2)
  } else {
    c.log('within');
    _within(e.target, placeholder);
  }
}

在元素鼠标离开时，我将占位符(全局变量)与其自己的父元素分离:

function _handleDragLeave(e) {
  placeholder.parentNode.removeChild(placeholder);
}

这让我烦透了。当检查休假时的源时，占位符元素仍然位于正确的位置。有任何想法吗？

仅供引用，如果你们对集成占位符有更好的想法，请告诉我们(没有 jquery 或现有库)。

Answer 1

这里没有什么问题......

首先，当您将鼠标悬停在占位符上时，您的 _handleDragOver 将始终执行其 else 条件，因为它没有子项。

function _handleDragOver(e) {
    var targetBoundingBox,
      targetMouseY;

    targetBoundingBox = e.target.getBoundingClientRect();
    targetMouseY = e.pageY - targetBoundingBox.top;

    if (e.target.hasChildNodes()) {
      // TODO check Y axis (/2)
    } else {
      c.log('within');
      _within(e.target, placeholder); //<-- this guy
    }
  }

dragOver 在将鼠标悬停在有效的放置目标上时不断触发。

接下来，_within 函数:

  function _within(target, element) {
    target.appendChild(element);
  }

如果您的 _detach 函数尚未删除占位符，这个小家伙会给您带来麻烦。如果您将其放到占位符上，并且它尚未被删除，那么您将尝试将其附加到自身...这将导致不有趣的烟花。

现在_detach:

  function _detach(element) {
    element.parentNode.removeChild(element);
  }

这会在您的 _handleDragLeave 函数中调用。当您放下拖动时，会触发 dragLeave 事件，删除占位符。

这就是错误出现的地方......将鼠标悬停在占位符上会导致它被dragLeave分离，但随后它会被dragOver附加回来，依此类推，从而导致闪烁。您收到的错误是由尝试删除占位符的放置事件引起的，当它已被 DragLeave 删除但在由于放置而尝试再次删除它之前尚未被 DragOver 重新应用。