HTML5练习，实现图片在两DIV中相互拖放效果

最新推荐文章于 2023-04-30 09:54:41 发布

oxgos

最新推荐文章于 2023-04-30 09:54:41 发布

阅读量1.3k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/oxgos/article/details/60891095

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

oxgos

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5练习，实现图片在两DIV中相互拖放效果

08_HTML5中的拖放效果 div {width:300px;height:300px;border:1px solid black;}#d1 {float:left;}#d2 {float:right;} /** 使用HTML5中的拖放API实现拖放功能* * 源元素事件 - drags
复制链接

扫一扫