DataTransfer.setData()

DataTransfer.setData() 方法用来设置拖放操作的drag data到指定的数据和类型。

如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得 types 列表中的最后一个项目将是新类型。

如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时 types列表的顺序不会更改。

示例数据类型为："text/plain" 和 "text/uri-list".

语法

void dataTransfer.setData(format, data);

参数

format

一个DOMString 表示要添加到 drag object的拖动数据的类型。

data

一个 DOMString表示要添加到 drag object的数据。

返回值

无

示例

此示例显示了使用 DataTransfer 对象的 getData(), setData() }和clearData() 方法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DataTransfer.setData()/.getData()/.clearData()</title>
    <style>
        div {
            margin: 0em;
            padding: 2em;
        }
        #source {
            color: blue;
            border: 1px solid black;
        }
        #target {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <section>
        <h1>
            <code>DataTransfer.setData()</code> <br>
            <code>DataTransfer.getData()</code> <br>
            <code>DataTransfer.clearData()</code>
        </h1>
        <div>
            <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
                Select this element, drag it to the Drop Zone and then release the selection to move the element.
            </p>
        </div>
        <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
            Drop Zone
        </div>
    </section>
    <!-- js -->
    <script>
        function dragstart_handler(ev) {
            console.log("dragStart");
            // Change the source element's background color to signify drag has started
            ev.currentTarget.style.border = "dashed";
            // Set the drag's format and data. Use the event target's id for the data
            ev.dataTransfer.setData("text/plain", ev.target.id);
        }

        function dragover_handler(ev) {
            console.log("dragOver");
            // prevent Default event
            ev.preventDefault();
        }

        function drop_handler(ev) {
            console.log("Drop");
            ev.preventDefault();
            // Get the data, which is the id of the drop target
            var data = ev.dataTransfer.getData("text");
            // appendChild
            ev.target.appendChild(document.getElementById(data));
            // Clear the drag data cache (for all formats/types)
            ev.dataTransfer.clearData();
        }
    </script>
</body>
</html>

规范

Specification
HTML Standard
# dom-datatransfer-setdata-dev

浏览器兼容性

BCD tables only load in the browser

参见