如何访问拖动的文本（或者：将文本拖动到输入中如何“工作”？）

从我到目前为止所看到的来看，我们可以使用onPaste验证/阻止内容的事件pasted进入一个<input>场地。同样，如果我们想验证/阻止按键，我们可以使用onkeydown事件。我很好奇ondrag and ondrop.

具体来说，我们如何检索用户的内容drags变成文字<input>？如果我们想获取整个更新的输入，我们可以使用onchange or onblur事件。不过我很好奇抢just拖动的文本——类似于我们如何使用event.which抓住just按下的键。

文本数据是否存储在event某处为ondrag or ondrop——它的格式是我们可以检索的吗？

我一直在探索 Dottoro 文档（drag http://help.dottoro.com/ljmojcxu.php/drop http://help.dottoro.com/ljbflwps.php）没有运气。

经过更多的窥探，我发现了一个 JavaScript 示例Dottoro http://help.dottoro.com/ljbflwps.php这让我掉进了兔子洞。

快速回答

文字可以是grabbed with event.dataTransfer.getData("Text") assuming浏览器支持 dataTransfer 对象。还有其他限制——例如 Webkit 问题getData始终为空dragstart or dragover (source https://stackoverflow.com/questions/9534677/html5-drag-and-drop-getdata-only-works-on-drop-event-in-chrome). (Fiddle http://jsfiddle.net/74u8X/4/)

同样，拖动的文本可以是modified通过使用event.dataTransfer.setData("Text", newText). (Fiddle http://jsfiddle.net/3ABF9/1/)

在上面的两个示例中，“Text”是format我们正在检索/修改的拖动内容。里面列出了很多选项MDN 文档 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer，但请注意，给定“拖动”的可用格式可以在events.dataTransferTypes array.

细节和背景

以下代码解释了如何使用 dataTransfer 对象以及一些特性：

//Modify the text when some specific text is dragged.
function changeDraggedText(event) {
  if (event.dataTransfer) {
    // Note: textData is empty here for Safari and Google Chrome :(
    var textData = event.dataTransfer.getData("Text"); 
    var newText = "..." //Modify the data being dragged BEFORE it is dropped.
    event.dataTransfer.setData (format, newText);
  }
}

//Access the text when the `drag` ends.
function getDraggedText(event) {
  if (event.dataTransfer) {
    var format = "Text";
    var textData = event.dataTransfer.getData (format);
    if (!textData) {
      // ... There is no text being dragged.
    } else {
      // ... Do what you will with the textData.
    }
  } else {
    // ... Some (less modern) browsers don't support dataTransfer objects.
  }

  // Use stopPropagation and cancelBubble to prevent the browser
  // from performing the default `drop` action for this element.
  if (event.stopPropagation) {
    event.stopPropagation ();
  } else {
    event.cancelBubble = true;
  }
  return false;
}

这可以只绑定到ondrop and ondragstart事件如以下 HTML 所示：

<div ondragstart="changeDraggedText(event)">
    Dragging these contents causes the `ondragstart` event to be fired.
</div>

<div ondragenter="return false;" 
     ondragover="return false;" 
     ondrop="getDraggedText(event);">
    And likewise, the `ondrop` event gets fired if I drop anything in here.
</div>

Caution: 如果你不覆盖ondragover and ondragenter事件，它们将像浏览器通常对待它们一样对待拖动；这意味着您不能将文本拖放到非输入块（例如<div>).