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

Question

我正在页面上实现拖放功能。这个想法是用户可以从特殊位置开始拖动图像并将其放到文本区域内(释放鼠标左键)，其中将发生特殊标签插入。
我对拖动本身没有任何问题，我遇到的问题是我无法确定鼠标在 textarea 中的位置。我从 mouseup 事件中知道 x 和 y 位置，我明确知道鼠标指针在 textarea 内，但无法确定在哪个位置我需要插入所需的标签。由于焦点不在文本区域内，selectionStart 和 selectionEnd 属性为 0。此外，值得注意的是，我通过返回 false 来防止默认行为> 在 mousemove 处理程序中 - 否则默认行为会将图像本身放在 textarea 中(这对于 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;
};

感谢任何帮助。

Answer 1

在您的情况下，使用 native ondragstart 事件而不是复杂的 mousedown-move-up 实现并操作数据以删除会更容易。像这样:

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

A live demo at jsFiddle .或者 a delegated version .请注意，您还可以委托(delegate)给“特殊位置”元素，这可能会使页面运行得更快一些。