私は（リッチ）テキストボックスの<strong>キャレット位置</strong>を取得しようとしています/のdragover

Question

ホバー上のキャレット位置の取得私はがいくつかのテキストの上にドラッグしています。

これは、テキストボックスにドロップされたテキストに余分な文字を追加する必要があるため、デフォルトのドロップ動作を防ぐ必要があるためです。 event.target.appendChildで

function drop(event) { 
    event.preventDefault(); 
    var data = event.dataTransfer.getData("text"); 
    var placeholder = document.createTextNode("[%" + data + "%]"); 
    event.target.appendChild(placeholder); 
} 

コンテンツはテキストボックスの端部に配置されているので、/ホバリングをドラッグするときにキャレットの位置が何であるかを把握する方法がなければなりません。

私は私のテキストをドロップすることがしたい場所です：

代わりに、それは私の入力内容の最後に追加されます：

Answer 1

代わりの操作drop -event、私はそれをdragstart -eventを操作して作業させました。

var btn = document.getElementById("foo"); 
 

 
btn.onclick = function(event) { 
 
    event.preventDefault(); 
 
}; 
 

 
btn.ondragstart = function(event) { 
 
    event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]"); 
 
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<span draggable="true" id="foo" class="btn btn-primary">Foo</span> 
 
<input type="text" />