Question

我正在页面上实现拖放功能。我们的想法是，用户可以开始从特殊位置拖动图像并将其放下（释放鼠标左键）在textarea中，在那里将发生特殊标记插入。
我对拖动本身没有任何问题，我得到的问题是我无法确定textarea中鼠标的位置。我知道来自x事件的y和mouseup位置，我确定知道鼠标指针位于textarea内，但无法确定我需要在哪个位置插入所需的标记。由于焦点不在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

在您的情况下，使用本机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。请注意，您也可以委派给特殊地点＆＃34;元素，这可能会使页面运行得更快。

如何使用Javascript在textarea中的字符中获取鼠标位置

1 个答案: