[html5] 学习笔记- html拖放

时间：2021-01-21 07:32:08

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在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;
 }

相关文章