Getting the caret position on hover/dragover

Question

I am trying to get the caret position of the (rich)textbox I am dragging some text over.

The reason behind this is that I need to add some extra characters to the dropped text in my textbox, so I needed to prevent the default drop behavior.

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

With event.target.appendChild the content is placed at the end of the textbox, so there should be a way to figure out what the position of the caret is when dragging/hovering.

This is where I'd like my text to be dropped:

Instead, it's added to the end of my input content:

Answer 1

Instead of manipulating the drop -event, I got it working by manipulating the 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" />