draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：

true 表示此元素可拖拽
false 表示此元素不可拖拽
auto 除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽
其它任何值 表示不可拖拽

事件：

【被拖拽元素】

ondragstart 拖拽前触发（鼠标按下并开始拖拽）
ondrag            拖拽过程中触发（连续出发，即使鼠标不移动也会连续触发）
ondragend      拖拽结束触发

【目标元素】

ondragenter   进入目标元素
ondragover    
ondrop 释放鼠标瞬间触发
ondragleave   鼠标离开目标元素触发

整个拖拽过程事件顺序：

ondragstart   — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend

注：1.  若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

2.  在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。

关于event.dataTransfer

setData(key,value) 两个参数都是字符串类型
getData(key) getData()可以取得由setData()保存的值
effectAllowed

设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)  ；

事件 ondragstart中设置
setDragImage(element, x, y)

指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。

其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。

实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme
files

获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。

实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

注：只能在拖放事件的事件处理程序中访问dataTransfer对象。

保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。

关于FileReader（读取文件信息）

readAsDataURL        
 参数为要读取的文件对象，将文件读取为DataUrl
onLoad                          
  读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据

例：

一个完整的实例（拖拽上传预览）：

<html>

<head>

    <title></title>

    <style>

        * {

            padding: 0px;

            margin: 0px;

        }

        #oDiv1 {

            width: 300px;

            height: 300px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <div id="oDiv1"></div>

    <script>

        var oDiv1 = document.getElementById("oDiv1");

        var oDiv2 = document.getElementById("oDiv2");

        oDiv1.ondragenter = function (ev) {

            this.style.borderStyle = "dashed";

        }

        oDiv1.ondrop = function (ev) {

            var files = ev.dataTransfer.files;

            for (var i = 0, f; f = files[i]; i++) {

                var reader = new FileReader();

                reader.onload = (function (f) {

                    return function () {

                        oDiv1.innerHTML = '<img src="' + this.result + '" title="' + f.name + '" width="100%"  />';

                    }

                })(f)

                //(function(f){reader.onload = function (ev) {

                //    oDiv1.innerHTML = '<img src="' + ev.target.result + '" title="' + f.name + '" width="100%" height="100%" />';

                //}})(f)

                reader.readAsDataURL(f);

            }

            this.style.borderStyle = "solid";

            ev.stopPropagation();

            ev.preventDefault();

        }

        oDiv1.ondragover = function (ev) {

            ev.stopPropagation();

            ev.preventDefault();

        }

        oDiv1.ondragleave = function (ev) {

            this.style.borderStyle = "solid";

        }

    </script>

</body>

</html>

html5 拖放---（二）转的更多相关文章

  1. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  2. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  3. HTML5 拖放

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

  4. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  5. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  6. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  7. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  8. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  9. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

  10. HTML5系列二（标签元素、FileReader、拖放）

    nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

随机推荐

  1. SQL Server Profile：使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

  2. UILabel 的使用，属性详解

    ·UILable是iPhone界面最基本的控件,主要用来显示文本信息. ·常用属性和方法有: .创建 CGRect rect = CGRectMake(, , , ); UILabel *label ...

  3. Selenium webdriver 截图 太长截不全的问题

    Selenium webdriver 截图 太长截不全的问题 1.环境 selenium webdriver.net 2.46.0.0 + firefox 37.0.1 + win 8.1 2.问题 ...

  4. mercurial(Hg) Server 搭建 过程记录

    mercurial(Hg) Server 搭建 过程记录 1.  环境说明 只是测试搭建,环境为本机开发环境:win 8.1 + IIS8.5 软件准备: 2.  软件安装 先安装Python2.7, ...

  5. C#检测串口被拔掉等一些触发事件合集

    // //设备异常重载 // protected override void WndProc(ref Message m) { if (m.Msg == 0x0219) {//设备被拔出 if (m. ...

  6. CSS3笔记（一）

    最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...

  7. linux 文件查找和压缩工具

    文件查找 1,which命行查找可执行文件,which 只会搜索系统$PATH目录 2,whereis,查找可执行文件,并显示出此文件的man page文件,并且可以查找到系统的库目录 3,locat ...

  8. keepalived+httpd 做web服务的高可用

    场景: 环境中有两台httpd服务器,一台做主,一台做备用:平时只用主向外提供http服务:当主宕机后,keepalived把vip绑定到备机上去,这样就由备机提供http服务了. **keepalv ...

  9. package.json 的语法解释

    https://www.ijser.cn/npm-package-json-document/ 形式可以有如下多种: version 严格匹配某个版本 >version 必须大于某个版本 > ...

  10. CActiveForm提示中文化

    一般情况下,yii框架的CActiveForm组建的提示是英文的,把它改成中文提示 首先在main.php配置文件中,设置 'language'=>'zh_cn'; 这样将会使得cannot b ...