HTML5 拖放文本：preventdefault vs move答案

【问题标题】：HTML5 drag & drop text: preventdefault vs moveHTML5 拖放文本：preventdefault vs move
【发布时间】：2013-04-05 07:49:43
【问题描述】：

我有两个带有格式化内容的 contenteditable div（例如，其中的段落带有粗体/斜体文本等），我想将选定的文本从一个移动到另一个。它在本机上运行良好，但我想在删除移动的文本时“清理”它，例如删除任何格式（“hello”将变为“hello”）。所以我决定像这样使用 HTML5 的 drop 事件：

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

它可以工作并将“清理”（纯）文本放置到正确的位置，但源内容可编辑 div 中最初选择的文本不会被删除 - 因为默认行为被“return false”阻止 - 所以需要文本移动变为文本副本。如何在预处理拖放文本的同时实现默认文本移动行为？

【问题讨论】：

标签： html drag-and-drop contenteditable

【解决方案1】：

使用Selection API（IE

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

【讨论】：