How to Access Dragged Text (Or: How Does Dragging Text into an Input "Work"?)

Question

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.

Answer 1

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>).