<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="郭晅自">
<title>08_HTML5中的拖放效果</title>
<style type="text/css">
div {
width:300px;
height:300px;
border:1px solid black;
}
#d1 {
float:left;
}
#d2 {
float:right;
}
</style>
</head>
<body>
<div id="d1">
<img src="Penguins.jpg" id="img" width="200px"/>
</div>
<div id="d2"></div>
</body>
<script>
/*
* 使用HTML5中的拖放API实现拖放功能
* * 源元素事件 - dragstart事件
* * 目标元素事件 - drop和dragover事件
* * dataTransfer对象
*/
var img = document.querySelector("#img");
var d2 = document.querySelector("#d2");
var d1 = document.querySelector("#d1");
img.addEventListener("dragstart",myDragStart);
/*img.addEventListener("drag",myDrag);
img.addEventListener("dragend",myDragEnd);*/
// 为目标元素绑定dragover和drop事件
d1.addEventListener("dragover",myDragOver);
d1.addEventListener("drop",myDrop1);
d2.addEventListener("dragover",myDragOver);
d2.addEventListener("drop",myDrop2);
/*d2.addEventListener("dragleave",myDragLeave);
d2.addEventListener("dragenter",myDragEnter);*/
function myDragStart(event){
// 将源元素的数据,存储在dataTransfer对象中
// 1. 获取源元素数据
var src = img.src;
// 2. 获取dataTransfer对象
var trans = event.dataTransfer;
/*
* 3. 调用setData(type,data)方法
* * type - 类型,特指标识(id)
* * 类型一般为string
* * data - 设置的数据内容
*/
trans.setData("text",src);
}
function myDragOver(event){
event.preventDefault();
}
function myDrop1(event){
var trans = event.dataTransfer;
var src = trans.getData("text");
d1.innerHTML = "<img src='"+src+"' id='img' width='200px'/>"
d2.innerHTML = "";
trans.clearData();
}
function myDrop2(event){
// 从dataTransfer对象中,获取之前设置的数据
// 1. 获取dataTransfer对象
var trans = event.dataTransfer;
/*
* 2. 从dataTransfer对象中,获取设置的数据
* getData(type)方法
* * type - 之前调用setData()时,传递的是什么值,这里传递什么值
*/
var src = trans.getData("text");
// 3. 将源元素(图片),添加到目标元素中
d2.innerHTML = "<img src='"+src+"' id='img' width='200px'/>"
d1.innerHTML = "";
// 4. 清除dataTransfer对象中的数据
trans.clearData();
}
//function myDragEnter(){}
//function myDragLeave(){}
</script>
</html>
转载请注明原文地址: https://ju.6miu.com/read-7945.html
