[H5]HTML5拖放
包括HTML中拖放和拖放本地资源。
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style>
#divID1 {
width: 400px;
height: 400px;
background-color: #66CCFF;
float: left;
}
#divID2{
width: 400px;
height: 400px;
background-color: #FF0000;
float: left;
}
#imgID1{
width: 150px;
height: 200px;
}
#divID10{
width: 400px;
height: 400px;
background-color: aquamarine;
clear: both;
}
</style>
<script src="indexJS.js"></script>
</head>
<body>
<!--HTML5拖放-->
<!--ondragstart: 调用一个函数drag(event)它规定了被拖动的数据-->
<!--setData(): 设置被拖数据的数据类型和值-->
<!--ondragover: 事件规定在何处放置被拖动的数据-->
<!--ondrop: 当放置被拖数据时会触发drop事件-->
<div id="divID1"></div>
<div id="divID2"></div>
<img id="imgID1" src="picture/33333.jpg">
<!--显示拖放日志-->
<div id="divLogID"></div>
<!--拖放本地资源-->
<div id="divID10"></div>
</body>
</html>
[indexJS.js]
var tempDiv1;
var tempDivLog;
var tempImg;
var tempDiv2;
var tempDiv10;
window.onload = function () {
tempDiv1 = document.getElementById("divID1");
tempDivLog = document.getElementById("divLogID");
tempImg = document.getElementById("imgID1");
tempDiv2 = document.getElementById("divID2");
tempDiv10 = document.getElementById("divID10");
// 监听拖入事件
// tempDiv1.ondragenter = function (ev) {
// showDragLogAction(ev);
// }
tempDiv1.ondragover = function (ev) {
// 阻止系统默认事件
ev.preventDefault();
}
tempDiv2.ondragover = function (ev) {
ev.preventDefault();
}
tempDiv10.ondragover = function (ev) {
ev.preventDefault();
}
//监听图片拖动开始事件
tempImg.ondragstart = function (ev) {
// 通过dataTransfer可以等到一些操作方法
// 设置数据
ev.dataTransfer.setData("newImgID","imgID1"); // 参数一表示新img的ID
}
// 拖放页面上资源
tempDiv1.ondrop = onDropAction;
tempDiv2.ondrop = onDropAction;
/*
// 单个区域拖动
tempDiv1.ondrop = function (ev) {
// 通过dataTransfer可以等到一些操作方法
showDragLogAction(ev.dataTransfer);
// 阻止系统默认事件
ev.preventDefault();
// 获取数据
var newImg = document.getElementById(ev.dataTransfer.getData("newImgID"));
tempDiv1.appendChild(newImg);
}
}
*/
// 拖放本地资源
tempDiv10.ondrop = function (ev) {
ev.preventDefault();
// 获取数据
var newFile = ev.dataTransfer.files[0];
// FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。
var fileReader = new FileReader();
fileReader.onload = function (ev) {
// showDragLogAction(ev.target);
tempDiv10.innerHTML = "<img src=\""+fileReader.result+"\" width='150px' height='150px'>"
}
fileReader.readAsDataURL(newFile);
}
}
// 多个区域拖动
function onDropAction (ev) {
// 通过dataTransfer可以等到一些操作方法
showDragLogAction(ev.dataTransfer);
// 阻止系统默认事件
ev.preventDefault();
// 获取数据
var newImg = document.getElementById(ev.dataTransfer.getData("newImgID"));
// tempDiv1.appendChild(newImg);
ev.target.appendChild(newImg);
}
// 展示拖放日志
function showDragLogAction (object) {
var tempString = "";
for (var i in object) {
tempString += i + ":"+object[i]+"<br/>";
}
tempDivLog.innerHTML = tempString;
}
示意图: