如何在鼠标位置插入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将收到被创建。

希望它可以帮助一些方向，