首页 > 代码库 > HTML5之拖放

HTML5之拖放

2024-10-22 23:58:02   208人阅读

- 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 )">&#x2397;</div>
 var drop = function(evt) {     var file = evt.dataTransfer.files[0];  };  var dataURLReader = new FileReader();  dataURLReader.onloadend =  function() {     imgElem.src =http://www.mamicode.com/ 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>

 

HTML5之拖放


联系
我们