标签：style blog http java color 文件
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>
代码注释：
调用 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>
HTML5 File API — 拖拽显示,布布扣,bubuko.com
标签：style blog http java color 文件
原文地址：http://www.cnblogs.com/zjzhome/p/3815500.html
