マウスでの文字列の位置は？

Question

私は文字列中の位置を見つけようとしていて、jQueryを使ってドロップ時に<img>タグを追加しようとしています。

私がやりたいことは、段落のHTMLを文字列に変換するか、テキスト領域に変換することです。

HTMLをカーソルの位置に追加する方法はありますか？

Answer 1

利用window.getSelection（）とレンジ：

http://www.quirksmode.org/dom/range_intro.html

http://help.dottoro.com/ljvhnwsk.php

Answer 2

X座標とY座標が指定されている場合は、document.elementFromPoint(x, y)を使用して要素を取得できます。それ以外の場合は、this answerに記載されている方法を使用してXとYを取得できます。

したがって、XとYを与えます。その後：

function appendElementAt(img, x, y){ 
    var elem = document.elementFromPoint(x, y); 
    var pos = elem.getBoundingClientRect(); //Calculate position of element 
    var topPos = y - pos.top;     // Calculate top position 
    var leftPos = x - pos.left    // Calculate left positon 

    elem.style.position = "relative"; 
    img.style.position = "absolute"; 
    img.style.top = topPos; 
    img.style.left = leftPos; 
    elem.appendChild(img); 
} 
// Usage: 

var img = document.createElement("img"); 
appendElementAt(img, x, y);