HTML5之拖放

- 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>