H5新特性拖拽更换图片
H5新特性拖拽更换图片
越陌度阡
发布于 2020-11-26 16:53:24
发布于 2020-11-26 16:53:24
运用H5新特性拖拽API实现一个拖拽更换图片的效果。
实现效果如下：
代码实现如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>H5新特性拖拽更换图片</title>
<style>
body {
text-align: center;
}
#chosen {
border: 1px solid #aaa;
width: 210px;
min-height: 110px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>请选择此关出征的飞机</h3>
<div id="chosen">
<img src="images/p0.png" id="p0">
</div>
<hr />
<div id="list">
<img src="images/p3.png" id="p3">
<img src="images/p4.png" id="p4">
<img src="images/p5.png" id="p5">
</div>
<script>
// 全局变量，被拖动的飞机的ID
var draggedPlaneId = null;
// 拖动源对象,获取所有飞机图片
var planeList = document.querySelectorAll('#list img');
// 遍历所有飞机图片列表
for (var i = 0; i < planeList.length; i++) {
// 存储每个id
var p = planeList[i];
// 事件源拖动开始
p.ondragstart = function (e) {
// 获取事件源的id
draggedPlaneId = this.id;
};
// 事件源拖动中
p.ondrag = function (e) { };
// 事件源拖动结束
p.ondragend = function (e) { }
}
// 拖动目标对象,鼠标进入目标对象
chosen.ondragenter = function (e) { };
// 悬停于目标对象上方
chosen.ondragover = function (e) {
e.preventDefault();
};
// 鼠标离开目标对象
chosen.ondragleave = function (e) { };
// 鼠标在目标对象上释放
chosen.ondrop = function (e) {
// 隐藏问号飞机
p0.style.display = 'none';
// 根据之前保存的被拖动的飞机ID，查找对应的IMG元素
var p = document.getElementById(draggedPlaneId);
// 把选中DIV列表中的飞机追加为自己的孩子，列表中不再有此元素
chosen.appendChild(p);
// 若此时#chosen子元素数量已经为3个，必须p0后的那个重新移回#list
if (chosen.children.length >= 3) {
// list.appendChild( p0.nextSibling ); 错误写法
list.appendChild(p0.nextElementSibling);
}
};
// 鼠标进入目标对象
list.ondragenter = function (e) { };
// 鼠标在目标对象上释放
list.ondragover = function (e) {
// 阻止默认,使得drop可能触发
e.preventDefault();
};
// 鼠标离开目标对象
list.ondragleave = function (e) { };
// 鼠标在目标对象上释放
list.ondrop = function (e) {
if (draggedPlaneId !== 'p0') {
// 把拖动的非p0移动到#list
var p = document.getElementById(draggedPlaneId);
list.appendChild(p);
// 显示出p0
p0.style.display = 'block';
}
}
</script>
</body>
</html>本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读