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

Question

从我目前所见，我们可以使用该onPaste事件来验证/阻止粘贴到<input>字段中的内容。同样，如果我们想验证/防止按键按下，我们可以使用该onkeydown事件。我很好奇ondrag和ondrop。

具体来说，我们如何检索用户拖动到文本中的内容<input>？如果我们想获取整个更新的输入，我们可以使用onchangeoronblur事件。不过，我很好奇抓住刚刚拖动文本-类似于我们如何能够利用event.which抢刚按下的键。

文本数据是否存储在event某处用于ondrag或ondrop- 并且它是我们可以检索的格式？

我一直在探索 Dottoro 文档（拖/放），但没有运气。

Answer 1

经过更多的窥探，我在Dottoro上发现了一个 JavaScript 示例，这让我陷入了困境。

快速回答

文字可以抓住与假设浏览器支持数据传递的对象。还有其他限制 - 例如 Webkit 问题，在or ( source )上始终为空。（小提琴）event.dataTransfer.getData("Text") getDatadragstartdragover

同样地，拖动文本可以被改性使用event.dataTransfer.setData("Text", newText)。（小提琴）

在上面的两个示例中，“文本”是format我们正在检索/修改的拖动内容的。MDN 文档中列出了许多选项，但请注意，可以在events.dataTransferTypes数组中找到给定“拖动”的可用格式。

细节和背景

下面的代码解释了如何使用 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和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>

注意：如果您不覆盖ondragover和ondragenter事件，它们将像浏览器通常对待它们一样对待拖动；这意味着您不能将文本放到非输入块（例如<div>）上。