您的位置：首页 > Web前端 > HTML5

html5实现本页面元素拖放和本地文件拖放

2017-04-01 13:25 435 查看
HTML5拖放
拖放本地数据

1.HTML拖放
拖放（Drag 和 Drop）是HTML5标准的组成部分
2.拖放开始：
ondragStart:调用了一个函数，drag(event),它规定了被拖动的数据
3.设置拖动数据：
setDate():设置被拖动数据的数据类型和值
4.放入位置：
ondragover:事件规定在何处放置被拖动的数据
5.放置：
ondrop：当放置被拖数据时，或发生drop事件

html5实现本页面元素拖放

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>拖放本页面数据</title>
<style>
.box {
width: 400px;
height: 400px;
}

#box2 {
float: left;
background-color:black;
}
#box1 {
float: left;
background-color: #cccccc;
}
</style>
</head>

<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="img/xk.png" width="100px" height="100px" />
<div id="msg"></div>
<script>
var box1Div,box2Div, msgDiv, imgDiv1;
window.onload = function() {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
msgDiv = document.getElementById("msg");
imgDiv1 = document.getElementById("img1");
/*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
showObj(e);
}*/
box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
e.preventDefault();
}

box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
e.preventDefault();
}

imgDiv1.ondragstart = function(e) { //当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
e.dataTransfer.setData("imgId", "img1");
}

box1Div.ondrop = dropImghandler; //被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
box2Div.ondrop = dropImghandler;
}

function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault();

//创建节点
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}

function showObj(obj) {
var s = "";
for(var k in obj) {
s += k + ":" + obj[k] + "<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</body>

</html>


页面元素拖放效果：







html5实现本地文件拖放

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>拖放本地数据</title>
<style>
#imgContainer{
background-color: #CCCCCC;
width: 500px;
height: 500px;
}
</style>
</head>

<body>
<div id="imgContainer"></div>
<div id="msg"></div>
<script>
var imgContainer;
var msgDiv;
window.onload = function(){
imgContainer = document.getElementById("imgContainer");
msgDiv = document.getElementById("msg");
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var fileObj = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e){
showObj(e.target);
imgContainer.innerHTML = "<img src='"+e.target.result+"' width='100px' height='100px' />"
}
fileReader.readAsDataURL(fileObj);
}
}
function showObj(obj) {
var s = "";
for(var k in obj) {
s += k + ":" + obj[k] + "<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</body>

</html>


本地文件拖放效果：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航