HTML5之拖放
浏览数：34 /
时间：2015年06月09日
- Draggable 标签 文件拖放
99年IE5开始,05后所有浏览器支持(除了opera)
<li id=be draggable=true ondragstart="startDrag(event)">Brussels</li>
此时提供的接口
var dragStart = function(evt) {
evt.dataTransfer.setData(‘text‘,evt.target.id);
};
- 文件拖放示例
<div ondragenter="return false;" ondragover="return false;" ondrop="drop(event )">⎗</div>
var drop = function(evt) {
var file = evt.dataTransfer.files[0];
};
var dataURLReader = new FileReader();
dataURLReader.onloadend = function() {
imgElem.src = dataURLReader.result;
imgInfo.innerHTML = file.name+‘ (‘+_inKb(file.size)+‘)‘;
}
dataURLReader.read AsDataURL(file);
var binaryReader = new FileReader();
binaryReader.onload = function() {
var exif = findEXIFinJPEG(binaryReader.result);
for(var key in exif){
exifInfo.innerHTML += _asRow(key,exif[key]);
}
};
binaryReader.readAsBinaryString(file);
- 文件API和拖放
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/html5/dnd.html
- Contenteditable 和 spellcheck
可编辑标签和自动拼写检查标签
<p contenteditable=true>
Text to be edited ...
</p>
<p contenteditable=true spellcheck=true>
Text to be edited ...
</p>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
