| |
<!DOCTYPE html> |
| |
<html> |
| |
<head> |
| |
<title>HTML5中的拖放效果</title> |
| |
<meta charset="utf-8" /> |
| |
<style> |
| |
#d1 { |
| |
width : 300px; |
| |
height : 300px; |
| |
border : solid 1px black; |
| |
float : left; |
| |
} |
| |
#d2 { |
| |
width : 300px; |
| |
height : 600px; |
| |
border : solid 1px black; |
| |
float : right; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
|
| |
<div id="d1"> |
| |
<img id="myimg" src="Penguins.jpg" width="256" /> |
| |
</div> |
| |
|
| |
<div id="d2"></div> |
| |
<script> |
| |
/* |
| |
* 使用HTML5中的拖放API实现拖放功能 |
| |
* * 源元素事件 - dragstart事件 |
| |
* * 目标元素事件 - drop和dragover事件 |
| |
* * dataTransfer对象 |
| |
*/ |
| |
// 1. 获取源元素 |
| |
var myimg = document.getElementById("myimg"); |
| |
// 2. 获取目标元素 |
| |
var ele = document.getElementById("d2"); |
| |
// 3. 为源元素绑定dragstart事件 |
| |
myimg.addEventListener("dragstart",MyDragStart); |
| |
// 4. 为目标元素绑定dragover和drop事件 |
| |
ele.addEventListener("dragover",MyDragOver); |
| |
ele.addEventListener("drop",MyDrop); |
| |
// 5. 实现事件的处理函数 |
| |
function MyDragStart(event){ |
| |
// 将源元素的数据,存储在dataTransfer对象中 |
| |
// 1. 获取源元素数据 |
| |
var mydata = myimg.src; |
| |
// 2. 获取dataTransfer对象 |
| |
var trans = event.dataTransfer; |
| |
/* |
| |
* 3. 调用setData(type,data)方法 |
| |
* * type - 类型,特指标识(id) |
| |
* * 类型一般为string |
| |
* * data - 设置的数据内容 |
| |
*/ |
| |
trans.setData("text",mydata); |
| |
} |
| |
function MyDragOver(event){ |
| |
event.preventDefault(); |
| |
} |
| |
function MyDrop(event){ |
| |
// 从dataTransfer对象中,获取之前设置的数据 |
| |
// 1. 获取dataTransfer对象 |
| |
var trans = event.dataTransfer; |
| |
/* |
| |
* 2. 从dataTransfer对象中,获取设置的数据 |
| |
* getData(type)方法 |
| |
* * type - 之前调用setData()时,传递的是什么值,这里传递什么值 |
| |
*/ |
| |
var mysrc = trans.getData("text"); |
| |
// 3. 将源元素(图片),添加到目标元素中 |
| |
ele.innerHTML = "<img src='"+mysrc+"' width='256'/>"; |
| |
// 4. 清除dataTransfer对象中的数据 |
| |
trans.clearData("text"); |
| |
} |
| |
/* |
| |
* 事件对象 - 作为事件处理函数的参数存在 |
| |
* * DOM底层代码的默认写法就是event |
| |
* * 如果使用event事件对象时,标准写法 |
| |
* * 允许不在事件的处理函数中定义参数 |
| |
* * 注意 - 这种写法不是标准写法(不建议) |
| |
*/ |
| |
</script> |
| |
</body> |
| |
</html> |