HTML5 中的拖放操作

Question

Drag and Drop operation requires to set up a function that specifies what data is to be dragged, for instance:

HTML code:

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag_start(event)" width="336" height="69">

Javascript code:

function drag_start(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

It's not to clear to me if the first parameter of the setData method should be "text" or "text/plan" (or something else).

The example here uses "text" , but the example here uses "text/plain" and other types.

Answer 1

It can be whatever you want. For example, in my code, I have

domItem.ondragstart = event => {
            event.dataTransfer.setData("itemid", this.id);
        };

and then, on the drag target, I have

domBox.ondrop = ev => {
            if (!ev.dataTransfer.getData('itemid')) return;
            ev.preventDefault();
            var itemId = ev.dataTransfer.getData("itemid");
            // do stuff with itemid
        };