Holen Sie sich die Caret-Position auf Hover/Dragover

Question

Ich versuche, die Caret-Position der (reichen) Textbox Ich bin ziehen etwas Text über.

Der Grund dafür ist, dass ich einige zusätzliche Zeichen zu dem in meinem Textfeld gelöschten Text hinzufügen muss, also musste ich das Standard-Drop-Verhalten verhindern.

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

Mit event.target.appendChild der Inhalt am Ende der Textbox platziert wird, so sollte es eine Möglichkeit geben, um herauszufinden, was die Position des caret ist beim Ziehen/schwebt.

Dies ist, wo ich meinen Text möchte fallen gelassen werden:

Stattdessen wird es bis zum Ende meiner Eingangsgehalt:

Answer 1

Statt Manipulation Das drop -Event, ich habe es funktioniert durch Manipulation der 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" />