码迷,mamicode.com
首页 > Web开发 > 详细

HTML5之拖放

时间:2015-01-04 15:03:55      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

- 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 = 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之拖放

标签:

原文地址:http://www.cnblogs.com/xgao/p/4201050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!