如何访问拖动的文本（或：如何将文本拖入输入“工作”？） [英] How to Access Dragged Text (Or: How Does Dragging Text into an Input "Work"?)

问题描述

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

具体来说，我们如何将用户拖拽的内容检索到文本< input> 中？如果我们想抓取整个更新的输入，我们可以使用 onchange 或 onblur 事件。然而，我很好奇抓住只是拖动的文本 - 类似于我们如何使用 event.which 来抓取只是按键。

存储在事件中的文本数据是否存在 ondrag 或 ondrop - 它的格式是否可以检索？

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

更多的窥探之后，我在 Dottoro 上找到了一个JavaScript示例，兔子洞。

快速解答

文字可以抓取 with event.dataTransfer.getData（Text） 假设浏览器支持dataTransfer对象。还有其他的限制 - 例如Webkit问题，其中 getData 在 dragstart 或<$ c上始终为空$ c> dragover （源）。
（ 小提琴 ）

同样，拖动的文本可以使用 event.dataTransfer.setData（Text，newText）修改 $ C> 即可。 （ 小提琴 ）

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

---

详细信息和上下文

下面的代码解释了如何使用dataTransfer对象和一些特性： p>

  //在拖动某些特定文本时修改文本。 
函数changeDraggedText（event）{
 if（event.dataTransfer）{
 //注意：textData在Safari和Google Chrome浏览器中为空：
 var textData = event.dataTransfer .getData（Text）; 
 var newText =...//修改被拖动的数据之前被删除
 event.dataTransfer.setData（format，newText）; 
} 
} 
 
 //当`drag`结束时访问文本
 function getDraggedText（event）{
 if（event.dataTransfer）{
 var format =Text; 
 var textData = event.dataTransfer.getData（format）; 
 if（！textData）{
 // ...没有文本被拖动。
} else {
 // ...用textData 
} 
}做什么？else {
 // ...一些（不太现代的）浏览器不支持dataTransfer对象
} 
 
 //使用stopPropagation和cancelBubble来防止浏览器
 //执行此元素的默认`drop`操作。 
 if（ev ent.stopPropagation）{
 event.stopPropagation（）; 
} else {
 event.cancelBubble = true; 
} 
返回false; 
} 
  

可以绑定到 ondrop code>和 ondragstart 事件，如以下HTML所示：



 < div ondragstart =changeDraggedText（event）> 
拖动这些内容会导致`ondragstart`事件被触发。 
< / div> 
 
< div ondragenter =return false; 
 ondragover =返回false; 
 ondrop =getDraggedText（event）;> 
同样，如果我在这里放下任何东西，ondrop事件就会被解雇。 
< / div> 
  

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

From what I've seen so far, we can use the onPaste event to validate/prevent content pasted into an <input> field. Likewise, if we want to validate/prevent a key press, we can use the onkeydown event. I'm curious about ondrag and ondrop.

Specifically, how can we retrieve the content that a user drags into a text <input>? If we wanted to grab the entire, updated input, we could just use the onchange or onblur events. However, I'm curious about grabbing just the dragged text -- similarly to how we can use event.which to grab just the pressed key.

Is the text data stored in the event somewhere for ondrag or ondrop -- and is it in a format that we can retrieve it?

I've been exploring the Dottoro docs (drag/drop) with no luck.

解决方案

After some more snooping, I found a JavaScript example on Dottoro that led me down the rabbit hole.

Quick Answer

The text can be grabbed with event.dataTransfer.getData("Text") assuming that the browser supports dataTransfer objects. There are other restrictions as well -- such as a Webkit issue where getData is always empty on dragstart or dragover (source). (Fiddle)

Likewise, the dragged text can be modified by using event.dataTransfer.setData("Text", newText). (Fiddle)

In both samples above, "Text" is the format of the dragged content we are retrieving/modifying. There are many options listed in the MDN documentation, but note that the available formats for a given "drag" can be found in the events.dataTransferTypes array.

---

Details and Context

The following code explains how to use the dataTransfer object and some peculiarities:

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

Which can just be bound to the ondrop and ondragstart events as in the following 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: if you don't override the ondragover and ondragenter events, they will treat drags as the browser normally treats them; this means you can't drop text onto a non-input block (such as a <div>).

这篇关于如何访问拖动的文本（或：如何将文本拖入输入“工作”？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！