zoukankan      html  css  js  c++  java
  • 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 )">&#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>
  • 相关阅读:
    redis乐观锁
    redis
    解决创建Redis容器没有conf配置文件
    redis缓存配置
    Docker架构
    Flask获取数据的一些方法
    Nginx正向代理、反向代理与负载均衡
    Sanic
    Dockerfile详解
    Centos7上安装docker
  • 原文地址:https://www.cnblogs.com/xgao/p/4201050.html
Copyright © 2011-2022 走看看