如何在鼠標位置插入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將收到被創建。

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