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; 
};