jQueryUI的拖动图像到CONTENTEDITABLE格，并在该位置拖放到文本

内我有一个形象，是一个jQueryUI的拖动和一个div是包含文本/ html和CONTENTEDITABLE是= TRUE一个jQueryUI的投掷的。jQueryUI的拖动图像到CONTENTEDITABLE格，并在该位置拖放到文本

我希望能够在CONTENTEDITABLE文本拖动图像，当我砸我希望能在该文本/字符位置下降的图像。

我发现有很多方法可以做到这一点，如果我点击或编辑选择文本，然后拖动图像中使用选定的文本范围，但是当我只需拖动图像并将其放置没有选定的文本。

我怎么能设置在drop事件的CONTENTEDITABLE文本选择/光标位置？

任何有帮助呢？

谢谢里克

来源

2012-09-14 Rick Moss

我不是什么问题相当清楚。 –

嗨蒂姆我已经使用你的代码在这个http://jsfiddle.net/rmossuk/qLQtK/2/获取光标位置，当我把图像放到contentEditable。但是这只有在我首先点击contentEditable内部然后将图像拖入它时才有效。我想要做的不是点击或选择contentEditable中的文本，只需拖放图像，然后拖放图像，我想要在文本中获取鼠标的位置，以便我可以将图像代码添加到该图像中在文本中的位置。希望这是有道理的？你能帮我吗？非常感谢 –

这似乎已经在这里得到了解答：http://stackoverflow.com/questions/3006623/drag-n-drop-on-contenteditable-elements - 虽然我不喜欢那个答案很多，我仍然期待。 – Brilliand

这个问题已经在这个网站的其他地方回答：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-31 21:55:02 Brilliand

jQueryUI的拖动图像到CONTENTEDITABLE格，并在该位置拖放到文本

回答

相关问题