在悬停/悬垂者上获得插入位置

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

我没有操纵dragstart - 事件，而是通过操纵var btn = document.getElementById("foo"); btn.onclick = function(event) { event.preventDefault(); }; btn.ondragstart = function(event) { event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]"); }; - 事件来实现它。

＆＃13;

＆＃13;

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

＆＃13;

data = {"one":"number","two":"string","three":"number","four":[{"five":"number","six","string"},{"five":"number","six":"string"}]}

＆＃13;

＆＃13;

＆＃13;