在javascript中输入光标位置鼠标悬停

Question

我有一个文本框，其中输入了一些文本。此外，我有一个可拖动的 div，我可以将其拖放到文本框上。该 div 的内容在放置时作为文本插入到文本框（附加到末尾）。

现在我希望能够在文本框中操纵光标，以便它跟随鼠标位置，并且文本恰好插入到放置的位置。

我已经有了鼠标 x 和 y ，我知道如何操作插入符，但我不知道如何将这两个结合起来......

预先感谢您的任何建议

Answer 1

由于只有 img 和 a 标签可以正常拖放，因此我决定使用它们。通过正确工作，我的意思是，当项目（a或img）被拖动到输入文本上时，它会强制光标（插入符号）沿着拖动的项目移动，并且内容被放置在文本中的确切位置。

这不适用于 div，所以我所做的是将我的项目创建为<a>带有空 href 的标签，然后我在 ondragstart 事件中切换 event.dataTransfer 内容，以便删除的不是 url（默认情况下会发生）而是我的自定义文本。

我使用淘汰赛绑定做到了：

<a class="measure-draggable" data-bind="html: title(), event: {'dragstart':$parent.setTransferProperties}" draggable="true"></a>

在 viewModel (coffeescript) 的幕后：

setTransferProperties: (sender, evt) ->
    evt.originalEvent.dataTransfer.setData("text/plain", "{{" + sender.title() + "}}")
    true

这可以解决问题

这是工作小提琴： https: //jsfiddle.net/foqb7b95/