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>
本地文件拖放效果：
