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格，並在該位置拖放到文本

回答

相關問題