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が、それ以前に作成されます：それはオプションである場合は、そのようにそれを行うことができます。

は、私はあなたが位置し、あらゆる `div`要素の座標を取得し、` window`オブジェクトからクライアントの座標を取得するために `getBoundingClientRectを（）`を使用することができると思う