0

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

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

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

如何在放置事件时在 contentEditable 文本中设置选定/光标位置？

有人帮忙吗？

谢谢瑞克

4

1 回答 1

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 内。

于 2014-10-31T21:55:02.277 回答