[html5] 学习笔记- html拖放
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记- html拖放相关的知识，希望对你有一定的参考价值。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在html5中，拖放是标准的一部分，任何元素都能够拖放。
1、html5拖放：（drag和drop）是HTML5标准的组成部分
拖动开始：ondragstart:调用了一个函数，drag（event），它规定了被拖动的数据
设置拖动数据：setData（）：设置被拖数据的数据类型和值
放入位置：ondragover:事件规定在何处放置被拖动的数据
放置：ondrop:当放置被拖动数据时，会发生drop事件
下例是将网页上的图片，拖放到网页上的指定区域：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖放</title> 6 <style> 7 .box{ 8 width: 400px; 9 height: 400px; 10 } 11 #box1{ 12 background-color: #cccccc; 13 } 14 </style> 15 <script src="app.js"></script> 16 </head> 17 <body> 18 <div id="box1" class="box"></div> 19 <img src="1.jpg" id="img1" height="400px" width="400px"> 20 <div id="msg"></div> 21 </body> 22 </html>
其中用到的app.js:
1 var boxDiv, msgDiv, img1; 2 3 window.onload = function() { 4 boxDiv = document.getElementById("box1"); 5 msgDiv = document.getElementById("msg"); 6 img1 = document.getElementById("img1"); 7 8 // boxDiv.ondragenter = function(e){ 9 // showObj(e); 10 // } 11 boxDiv.ondragover = function(e){ 12 e.preventDefault(); 13 } 14 img1.ondragstart = function(e){ 15 e.dataTransfer.setData("imgId","img1"); 16 } 17 18 boxDiv.ondrop = function(e){ 19 showObj(e.dataTransfer); 20 e.preventDefault(); 21 22 var img = document.getElementById(e.dataTransfer.getData("imgId")); 23 boxDiv.appendChild(img); 24 } 25 } 26 27 function showObj(obj){ 28 var s = ""; 29 for(var k in obj){ 30 s += k+ ":" + obj[k] +"<br/>" 31 } 32 msgDiv.innerHTML = s; 33 }
2、html5拖放本地资源
下例是将本地的图片，拖放到网页上的指定区域：
1 <<DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>拖放</title> 6 <style> 7 #imgContainer{ 8 background-color: #cccccc; 9 width:500px; 10 height: 500px; 11 } 12 </style> 13 <script src="app.js"></script> 14 </head> 15 <body> 16 <div id="imgContainer"></div> 17 <div id="msg"></div> 18 </body> 19 </html>
其中的app.js：
1 var imgContainer, msgDiv; 2 3 window.onload = function(){ 4 imgContainer = document.getElementById("imgContainer"); 5 msgDiv = document.getElementById("msg"); 6 7 imgContainer.ondragover = function(e){ 8 e.preventDefault(); 9 } 10 imgContainer.ondrop = function(e){ 11 e.preventDefault(); 12 13 var f= e.dataTransfer.files[0]; 14 var fileReader = new FileReader(); 15 fileReader.onload = function(e){ 16 showObj(e.target); 17 imgContainer.innerHTML = "<img src=\""+fileReader.result+\"">"; 18 } 19 fileReader.readAsDataURL(f); 20 } 21 } 22 23 function showObj(obj){ 24 var s=""; 25 for(var k in obj){ 26 s+=k+":"+obj[k]+"<br/>"; 27 } 28 msgDiv.innerHTML = s; 29 }
以上是关于[html5] 学习笔记- html拖放的主要内容，如果未能解决你的问题，请参考以下文章