时间戳

首页 > 解决方案 > HTML5 中的拖放操作

javascript - HTML5 中的拖放操作

问题描述

拖放操作需要设置一个函数来指定要拖动哪些数据，例如：

HTML 代码：

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

Javascript代码：

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

我不清楚 setData 方法的第一个参数是否应该是"text"or "text/plan"（或其他）。

这里的例子使用"text"，但是这里的例子使用"text/plain"and 其他类型。

标签： javascripthtmldrag-and-drop

解决方案

它可以是你想要的任何东西。例如，在我的代码中，我有

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

然后，在拖动目标上，我有

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

推荐阅读