jqueryui将图像拖动到contentEditable div中，并将其放置在文本中的该位置

Question

我有一个jqueryui可拖动的图像和一个包含text/html且contentEditable=true的jqueryui可拖放的div。

我希望能够将图像拖动到contentEditable文本上，当我将其拖放时，我希望能够将图像拖放到该文本/字符位置。

我已经找到了很多方法来做到这一点，如果我点击或选择可编辑的文本，然后使用选定的文本范围拖动图像，但当我只是拖动图像并放下它时，没有选择文本。

如何在contentEditable text on drop事件中设置选定/光标位置？

有人帮忙吗？

谢谢你，瑞克

Answer 1

这个问题已经在本网站的其他地方得到了回答：在contenteditable中进行精确的拖放

那里的解决方案有特定于每个浏览器的代码（通过特征检测），目前只适用于Chrome和火狐。对于Chrome，需要使用document.caretRangeFromPoint从鼠标坐标计算范围。对于Firefox，事件对象具有rangePental和rangeOffset属性，可用于确定插入符号应定位在何处。

document.addEventListener("drop", function(e) {
    var sel = document.getSelection();
    if(document.caretRangeFromPoint) { // Chrome
        var range = document.caretRangeFromPoint(e.clientX,e.clientY);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(e.rangeParent) { // Firefox
        var range = document.createRange();
        range.setStart(e.rangeParent, e.rangeOffset);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(sel.rangeCount == 0) { // Default to at least not completely failing
        var range = document.createRange();
        sel.addRange(range);
    }

    // The selection is now in the right place - proceed with whatever the drop should do
});

此代码旨在处理可编辑的整个文档-对于可编辑的div，您需要在该div上设置事件侦听器，并修改回退案例，以确保所选内容位于div内。