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

2019年7月27日 255次阅读

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

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

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

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

最佳答案 这个答案部分解决了问题的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;
});
点赞