在懸停/懸停時獲得插入符位置

Question

我正在嘗試將（文本）文本框的插入位置 拖到一些文本上。

這背后的原因是，我需要在文本框中的拖放文本中添加一些額外的字符，因此需要防止默認的拖放行為。

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

使用event.target.appendChild將內容放置在文本框的末尾，因此應該有一種方法可以確定拖動/懸停時插入標記的位置。

這是我希望刪除文本的地方：

而是將其添加到我的輸入內容的末尾：

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" />