Question

有没有办法可以在DOM中执行文件拖放操作，并在放置操作期间检测鼠标指针所在的DOM中的光标位置/范围？

我可以轻松捕获Drop并获取文件和内容，但我似乎无法弄清楚如何将自定义HTML标记放入丢弃位置的页面中。 drop提供了一个鼠标位置，但问题是如何将其（或其他任何东西）转换为光标位置和范围，我可以在其中粘贴文件的新链接（在我动态保存它之后）。 / p>

我的用例是我使用Ace编辑器（或任何contentEditable区域）并尝试将文件拖放到鼠标光标掉落位置的文档中。然后，我想要捕获该文件，并插入一个引用捕获文件数据的链接，在这种情况下，使用文件API捕获该数据并使用Web浏览器控件存储在磁盘上。除了检测文本文档中的放置位置之外，我可以将所有内容都设置为。

那么，任何想法如何从放下操作中获取选择范围？我有鼠标坐标，但我不确定如何将这些与文本位置相关联，从中可以创建范围以插入我的链接。

Answer 1

这个答案部分解决了问题的Ace编辑器部分，但没有说明如何使用原始DOM操作来解决这个问题。我希望其他人可以通过原始DOM来解决这个问题。

对于Ace Editor解决方案，它具有支持API，允许使用以下内容将PageX和PageY位置映射到编辑器文档中的物理行和列位置：

var pos = editor.renderer.screenToTextCoordinates(e.pageX, e.pageY)

使用该逻辑可以使用以下代码删除放置位置的文件：

var $el = $("pre[lang]") // editor element
.on("dragover", function(e) {            
    $(this).addClass("hover");            
    return false;
})
.on("dragleave", function() {          
    $(this).removeClass("hover");
    return false;
})
.on("drop", function(e) {            
    e = e.originalEvent;
    e.preventDefault();            

    // grab the file
    var file = e.dataTransfer.files[0];

    // do something to save the file data to disk or server
    var imageUrl = "somelinktoimage";

    // Ace Editor logic
    var pos = editor.renderer.screenToTextCoordinates(e.pageX, e.pageY);                

    var sel = te.editor.getSelection();
    sel.selectToPosition(pos);
    var range = sel.getRange();
    range.setStart(pos.row,pos.column);
    range.setEnd(pos.row, pos.column);
    sel.setSelectionRange(range);
    te.editor.getSession().replace(range, "![" + file.name + "](" + imageUrl + ")");

    return false;
});

将文件拖放到鼠标下的光标位置

1 个答案: