如何在鼠标位置插入div？

Question

如何在鼠标位置插入div？

如下图所示，红色圆圈是一个单击，在行内的引导列之间

如何确定div的插入位置？

您可以通过https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

轻松获取父元素

但是我如何区分哪些div，特别是当这些列可以浮动或推/拉？

Answer 1

你可以作为替代强制用户单击最后一个元素，然后在它之前插入元素吗？如果这是一个选项，那么你可以这样做：

function printMousePos(event) {
  var s = document.createElement('span');
  s.innerHTML = '|newDiv|';
  s.className = 'asterisk';
  elem = document.elementFromPoint(event.clientX, event.clientY);
  //elem.innerHTML ="clientX: " + event.clientX + " - clientY: " + event.clientY;
  elem.parentNode.insertBefore(s, elem);
}

document.addEventListener("click", printMousePos);

.row { background:#ddd; margin:5px; padding:5px; }
.row > div { display:inline-block; }
.new { background:yellow; }

<div class="row">
    <div class="somediv">|div|</div>
    <div class="somediv2">|div|</div>
    <div class="elem">|div|</div>
    <div class="elem">|div|</div>
    <div class="somediv3">|div|</div>
    <div class="somediv4">|div|</div>
</div>
<div class="row">
    <div class="somediv">|div|</div>
    <div class="somediv2">|div|</div>
    <div class="elem">|div|</div>
    <div class="elem">|div|</div>
    <div class="somediv3">|div|</div>
    <div class="somediv4">|div|</div>
</div>
<div class="row">
    <div class="somediv">|div|</div>
    <div class="somediv2">|div|</div>
    <div class="elem">|div|</div>
    <div class="elem">|div|</div>
    <div class="somediv3">|div|</div>
    <div class="somediv4">|div|</div>
</div>

单击一个div，将在它之前创建一个新的div。

希望它有所帮助，