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

HTML5之拖放的更多相关文章

  1. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  2. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  3. HTML5 — 让拖放变的流行起来

    先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变 ...

  4. HTML5 元素拖放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. HTML5 总结-拖放-3

    HTML5 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 ...

  6. HTML5 原生拖放

    前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标 相关知识点: 1.拖放事件 拖放元素时,将依次触发下列事件 dragstart  按 ...

  7. 【HTML5】拖放(Drag 和 drop)

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  8. HTML5的拖放事件

    1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...

  9. HTML5 的拖放(实例:两个div之间拖放图片)

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...

随机推荐

  1. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  2. material-dialogs

    https://github.com/afollestad/material-dialogs

  3. windows下的python扩展包下载地址

    比如lxml什么的 Unofficial Windows Binaries for Python Extension Packages pip install xxx.whl

  4. A Simple Actions Recognition System

    1. Problem Definition There's no doubt that researches and applications on the foundation of videos ...

  5. 判断手机andriod还是iphone

    手机识别:var isAndroid = navigator.appVersion.toLowerCase().indexOf(‘android’) >= 0,isIphone = naviga ...

  6. AVFoundation视频流处理

    框架 首先我们从整体对所需框架做个初步了解. AVFoundation在相关框架栈中的的位置: 为了捕捉视频,我们需要这样几种类(与其它的子类). AVCaptureDevice 代表了输入设备,例如 ...

  7. Sql语句中的truncate,delete,drop的区别

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 不同点: 1. truncate 和 delete 只删除数据不删除表的结构(定义) drop 语句 ...

  8. SSH框架整合面试题

    1. 谈谈你mvc的理解MVC是Model-View-Controler的简称.即模型-视图-控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC中的模型.视图.控制器它们 ...

  9. SQL Server 格式化时间format

    select format(sysdatetime(),'yyyy-MM-dd HH:mm:ss'); SQL Server 2012才开始有这功能 这种样式很像oracle的to_char(sysd ...

  10. html的标签中 unselectable=on 属性的作用

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...