Question

我有一个jqueryui draggable的图像和一个包含text / html并且是contentEditable = true的jqueryui droppable的div。

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

如果我单击或选择可编辑文本然后使用所选文本范围拖动图像，但是当我只是拖动图像并放下它时没有选择文本，我找到了许多方法。

如何在drop event上的contentEditable文本中设置所选/光标位置？

有人帮忙吗？

谢谢你瑞克

Answer 1

此问题已在本网站的其他地方得到解答：Precise Drag and Drop within a contenteditable

该解决方案具有特定于每个浏览器的代码（通过功能检测），目前仅适用于Chrome和Firefox。对于Chrome，需要使用document.caretRangeFromPoint从鼠标坐标计算范围。对于Firefox，事件对象具有rangeParent和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内

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

1 个答案: