[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拖放)