HTML5 File API — 拖拽显示

时间：2014-07-07 13:07:45 收藏：0 阅读：275

1、HTML5拖拽

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

如果是html中的元素，要进行拖动，需要设置draggable为true。

下面的代码显示了img在两个div里任意拖动。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 #div1, #div2
 6 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
 7 </style>
 8 <script type="text/javascript">
 9 function allowDrop(ev)
10 {
11     ev.preventDefault();
12 }
13 
14 function drag(ev)
15 {
16     ev.dataTransfer.setData("Text",ev.target.id);
17 }
18 
19 function drop(ev)
20 {
21     ev.preventDefault();
22     var data=ev.dataTransfer.getData("Text");
23     ev.target.appendChild(document.getElementById(data));
24 }
25 </script>
26 </head>
27 <body>
28 
29 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
30   <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
31 </div>
32 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
33 
34 </body>
35 </html>

View Code

代码注释：

　　调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

　　通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

　　被拖数据是被拖元素的 id ("drag1")

　　把被拖元素追加到放置元素（目标元素）中

（代码示例来自w3cSchool）

2、将HTML5 File API — 打开本地图片并预览示例简单的修改，就可以实现拖拽显示。

 1 <style type="text/css">
 2     #img_con {
 3         height: 200px;
 4         border: 1px solid #000;
 5     }
 6      .img {
 7          height: 100px;
 8          border: 1px solid #000;
 9          margin-right: 10px;
10      }
11 </style>
12 
13 <button type="button" id="open">打开文件</button>
14 <div id="img_con">
15     拖过来试试
16 </div>
17 <input type="file" name="file" id="file" accept="image/*" style="display:none" />
18 
19 <script type="text/javascript">
20 
21     var dropZone = document.getElementById(‘img_con‘);
22     dropZone.addEventListener(‘dragover‘, handleDragOver, false);
23     dropZone.addEventListener(‘drop‘, handleFileSelect, false);
24 
25     document.getElementById(‘open‘).addEventListener(‘click‘, function() {
26         document.getElementById(‘file‘).click();
27     }, false);
28 
29     document.getElementById(‘file‘).addEventListener(‘change‘, handleFileSelect, false);
30 
31     function handleDragOver(evt) {
32         evt.stopPropagation();
33         evt.preventDefault();
34         evt.dataTransfer.dropEffect = ‘copy‘; // Explicitly show this is a copy.
35     }
36 
37     function handleFileSelect(evt) {
38         evt.stopPropagation();
39         evt.preventDefault();
40         var file = evt.dataTransfer.files[0];
41 
42         var reader = new FileReader();
43 
44         reader.onload = (function(f) {
45             return function(e) {
46                 var span = document.createElement(‘span‘);
47                 span.innerHTML = [‘<img class="img" src="‘, e.target.result, ‘" title="‘, escape(f.name), ‘"/>‘].join(‘‘);
48                 document.getElementById(‘img_con‘).insertBefore(span, null);
49             }
50         })(file);
51 
52         reader.readAsDataURL(file);
53     }
54 </script>

View Code

HTML5 File API — 拖拽显示,布布扣,bubuko.com