拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放。
1、html5拖放:(drag和drop)是HTML5标准的组成部分
拖动开始:ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据
设置拖动数据:setData():设置被拖数据的数据类型和值
放入位置:ondragover:事件规定在何处放置被拖动的数据
放置:ondrop:当放置被拖动数据时,会发生drop事件
下例是将网页上的图片,拖放到网页上的指定区域:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖放</title> <style> .box{ width: 400px; height: 400px; } #box1{ background-color: #cccccc; } </style> <script src="app.js"></script> </head> <body> <div id="box1" class="box"></div> <img src="1.jpg" id="img1" height="400px" width="400px"> <div id="msg"></div> </body> </html>
其中用到的app.js:
var boxDiv, msgDiv, img1; window.onload = function() { boxDiv = document.getElementById("box1"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); // boxDiv.ondragenter = function(e){ // showObj(e); // } boxDiv.ondragover = function(e){ e.preventDefault(); } img1.ondragstart = function(e){ e.dataTransfer.setData("imgId","img1"); } boxDiv.ondrop = function(e){ showObj(e.dataTransfer); e.preventDefault(); var img = document.getElementById(e.dataTransfer.getData("imgId")); boxDiv.appendChild(img); } } function showObj(obj){ var s = ""; for(var k in obj){ s += k+ ":" + obj[k] +"<br/>" } msgDiv.innerHTML = s; }
2、html5拖放本地资源
下例是将本地的图片,拖放到网页上的指定区域:
<<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖放</title> <style> #imgContainer{ background-color: #cccccc; width:500px; height: 500px; } </style> <script src="app.js"></script> </head> <body> <div id="imgContainer"></div> <div id="msg"></div> </body> </html>
其中的app.js:
var imgContainer, 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 f= e.dataTransfer.files[0]; var fileReader = new FileReader(); fileReader.onload = function(e){ showObj(e.target); imgContainer.innerHTML = "<img src=\""+fileReader.result+\"">"; } fileReader.readAsDataURL(f); } } function showObj(obj){ var s=""; for(var k in obj){ s+=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; }