dataTransfer.setData()函数语法讲解:
dataTransfer.setData()函数语法：void dataTransfer.setData(format, data);dataTransfer.setData()参数：
Format：表示要添加到 拖动对象的拖动数据类型。
Data：表示添加到拖动对象的数据
返回值无。
举例说明DataTransfer对象中getData(), setData() andclearData()函数的使用方法
<!DOCTYPE html><html lang=en>
<title>Examples of DataTransfer.{setData(),getData(),clearData()</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart");
// 更改源元素的背景颜色以表示拖动已开始
ev.currentTarget.style.border = "dashed";
// 设置拖动的格式和数据。使用事件对象的ID来表示数据
ev.dataTransfer.setData("text/plain", ev.target.id);}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// 取得数据，对应于拖动后要放置的目的元素的ID
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
//清除拖曳元素的缓存
ev.dataTransfer.clearData();}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>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>
</body>
</html>
以上就是青锋建站给大家分享的dataTransfer.setData()函数的使用方法。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/setdata.html
