首页 > 代码库 > HTML5 File API — 拖拽显示
HTML5 File API — 拖拽显示
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=http://www.mamicode.com/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="http://www.mamicode.com/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>
代码注释：
调用 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="http://www.mamicode.com/‘, 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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。