HTML5拖放文本：防止默認vs移動

Question

我有兩個帶格式內容的contenteditable div（例如，其中的段落使用粗體/斜體文字等），我想將選定的文本從一個移動到另一個。它在本地運行良好，但我想在移動文本時「清理」移動的文本，例如，刪除任何格式（「<b> hello </b >」將成爲「hello」）。 所以我決定用HTML5拖放事件是這樣的：

dropHandler = function(e) { 
    text = e.dataTransfer.getData('text'); 

    if (document.caretRangeFromPoint) 
    { 
     range = document.caretRangeFromPoint(e.clientX, e.clientY); 
    } 
    else if (document.createRange && oe.rangeParent) 
    { 
     range = document.createRange(); 
     range.setStart(oe.rangeParent, oe.rangeOffset); 
    } 

    range.insertNode(document.createTextNode(text)); 

    return false; 
    }; 

它的工作原理，並提出了「清理」（純）文本到正確的位置，但在源CONTENTEDITABLE DIV最初選擇的文本不會被刪除 - 由於默認行爲被「返回false」阻止 - 所以所需的文本移動成爲文本複製。我怎樣才能實現默認的文本移動行爲，同時還預處理丟棄的文本？

Answer 1

使用Selection API（除了在IE < = 8，其不支持它）：

dropHandler = function(e) { 
    text = e.dataTransfer.getData('text'); 

    if (document.caretRangeFromPoint) 
    { 
    range = document.caretRangeFromPoint(e.clientX, e.clientY); 
    } 
    else if (document.createRange && oe.rangeParent) 
    { 
    range = document.createRange(); 
    range.setStart(oe.rangeParent, oe.rangeOffset); 
    } 

    // Keep a reference to the text node so we can select it later 
    var textNode = document.createTextNode(text); 
    range.insertNode(textNode); 

    var sel = window.getSelection(); 
    sel.deleteFromDocument(); 
    range.selectNodeContents(textNode); 
    sel.removeAllRanges(); 
    sel.addRange(range); 

    return false; 
};