如何使用Javascript获取文本区域中字符的鼠标位置

我正在页面上实现拖放功能。其想法是用户可以开始从特殊位置拖动图像，并将其（释放鼠标左键）放到文本区域内，在文本区域中插入特殊标记。
我对拖动本身并没有问题，问题是我无法确定鼠标在文本区域内的位置。我知道

mouseup

事件中的

x

和

y

位置，并且我明确知道鼠标指针位于文本区域内，但无法确定需要在哪个位置插入所需的标记。由于焦点不在文本区域内，

selectionStart

和

selectionEnd

属性为0。另外，值得注意的是，我通过在

mousemove

handler中返回

false

来防止默认行为，否则默认行为会将图像本身放在文本区域内（这对base64图像极为不利）。
下面是我目前拥有的代码

window.onPreviewItemMouseDown = function (e) {
        var curTarget = $(e.currentTarget);
        var container = curTarget.parent();
        window.draggingImage = funcToGetId();
        $(document).on("mousemove", window.onPreviewItemDragged);
        $(document).on("mouseup", window.onPreviewItemDropped);
    };

window.onPreviewItemDragged = function (e) {
    return false;
};

window.onPreviewItemDropped = function (e) {
    var target = $(e.target);
    $(document).off("mousemove");
    $(document).off("mouseup");
    if (target[0].id === ID_TEXTAREA_TEXT) {
        // here I need to get mouse pointer position inside the text somehow
    }

    return false;
};

---

非常感谢您的帮助。

在您的情况下，使用本机

ondragstart

事件，而不是复杂的鼠标向下上移实现，并操作要删除的数据会更容易。大概是这样的：

document.getElementById('img').addEventListener('dragstart', function (e) {
    e.dataTransfer.setData("text", '[img]' + this.id + '[/img]');
});

---

。或请注意，您还可以委托给“special place”元素，这可能会使页面运行得更快一些。

@Teemu我尝试只为图像插入标记，比如

[img]image\u id[/img]

，而不是图像主体本身。这是用来在文本（在文章中）后面显示图像的，这个文本区域用于编辑文章的文本。是的，我意识到，这就是为什么我删除了我的评论。使用？在小提琴中，只需将图像拖放到文本区域，并检查放置的位置和内容。（jQuery似乎没有传递

e.dataTransfer

对象，因此是本机处理。）@Teemu在本例中，它在文本中插入

src

标记的内容。当

src

的内容是URL时，它可以用于将来的解析。但是，当inside

src

为base64时，它会将所有内容插入其中。此外，如果图像较大（1MB或更大），则当您尝试这样做时，Chrome会崩溃。这就是我从

mousemove

处理程序返回false的原因。目前唯一的解决方案是将所有图像加载到服务器，然后使用

src

中的链接来拖放图像。然后解析textarea的内容并替换为正确的标记。只需添加。有一种情况，我想拒绝拖动操作，因为当base64中

src

内的图像太大时，Chrome崩溃。因此，对于本例，我还将添加

mousedown

处理程序，从中我将

为此类图像返回false

。对于所有其他情况，您的解决方案都非常适合。谢谢。您也可以在

dragstart

处理程序中进行大小检查。如果图像太大，请将数据设置为

“”

。或者，如果图像太大，您可以将

ondrop

处理程序附加到

textarea

，并取消拖放。