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

Question

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

感谢任何帮助。

Answer 1

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

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

A live demo at jsFiddle. Or a delegated version。请注意，您还可以委托给 "special place" 元素，这可能会使页面运行快一点。

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

How to get mouse position in characters inside textarea with Javascript

html

javascript

jquery

textarea

dom-events