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

时间:2016-01-04 06:35:04

标签: javascript drag-and-drop range selection ace-editor

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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;
});