nternet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素,dragElement :

1、添加事件:ondragstart

2、添加属性:dragable

放置元素,dropElement:

1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。

1、页面上元素间的拖放

下面用个小例子,div间的拖放来展示,各个事件如何被触发:

a href="http://www.codesec.net/kf/qianduan/css/" target="_blank" class="keylink">html> <script src="http://pic1.codesec.net/app_attach/20141022/20141022_32_50757_0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /** * 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 * 浏览器支持 *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 */ $(function () { $("#dragEle")[0].ondragstart = function (event) { console.log("dragStart"); event.dataTransfer.setData("Text", event.target.id); }; /** * 当放置被拖数据时,会发生 drop 事件。 * 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开) * @param event */ $("#dropEle")[0].ondrop = function (event) { /* for (var p in event.dataTransfer) { console.log(p + " = " + event.dataTransfer + " @@"); } */ console.log("onDrop"); var id = event.dataTransfer.getData("Text"); $(this).append($("#" + id).clone().text($(this).find("div").length)); event.preventDefault(); };2881064151 /** * ondragover 事件规定在何处放置被拖动的数据。 *默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 */ $("#dropEle")[0].ondragover = function (event) { console.log("onDrop over"); event.preventDefault(); } $("#dropEle")[0].ondragenter = function (event) { console.log("onDrop enter"); } $("#dropEle")[0].ondragleave = function (event) { console.log("onDrop leave"); } $("#dropEle")[0].ondragend = function (event) { console.log("onDrop end"); } }); </script> 
效果图: 

系统中选择的一个或多个文件拖入该div中,files中会存储拖入文件的信息,然后我们通过file可以得到文件的类型,长度,内容然后实现上传。

3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。

4、types,effectAllowed和dropEffect分别是拖入元素的类型,拖拽过程中鼠标显示的样式,我觉得可以忽略了这几个属性,一般用不到。

ondragover 事件规定在何处放置被拖动的数据的更多相关文章

  1. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  2. 监听table滚动事件,滚动到底部时加载数据

    mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...

  3. HTML5(Canvas Vedio Audio 拖动)

    1.Canvas    (在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字) HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形 ...

  4. HTML5 之拖放(drag与drop)

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

  5. 炫酷的html5(Drag 和 drop)拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

  6. HTML 学习笔记 (drag & drop)

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

  7. html5与css3

    Video属性 符号:<video>这里插入视频</video> Drag 和 drop属性 为了使元素可拖动,把 draggable 属性设置为 true: 2.       ...

  8. html 5 实现拖放效果

    在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障.只需要以下几步即可. 给被拖拽元素添加draggable属性,如果是文件拖放. 在拖拽元素的dragstar ...

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

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

随机推荐

  1. 更改Apache默认网站根目录

    Apache服务器网站根目录配置是个比较基本的操作,之前经常用,现在记一下笔记 打开Apache的配置文件,一般在Apache安装目录下的conf/httpd.conf配置文件中修改, 找到 Docu ...

  2. 如何从sun公司官网下载java API文档(转载)

    相信很多同人和我一样,想去官网下载一份纯英文的java API文档,可使sun公司的网站让我实在很头疼,很乱,全是英文!所以就在网上下载了别人提供的下载!可是还是不甘心!其实多去看看这些英文的技术网站 ...

  3. 项目总结(二)--- CocoaPods的简单介绍与使用

    先谈下,我们为什么要使用CocoaPods,它能为我们做什么吧. 所有开发过iOS应用的小伙伴们都知道,在整个项目中,第三方库的引用必不可少(特别感谢那些优秀第三方开源库的作者,给我们提供了多大的便捷 ...

  4. linux网络编程_1

    本文属于转载,稍有改动,以利于学习. (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端         网络程序和普通的程序有一个最大的区别是网络程序是由两个 ...

  5. C++中的static数据成员与static成员函数

    本文要点: 1.static成员它不像普通的数据成员,static数据成员独立于该类的任意对象而存在,每个static数据成员是与类关联的对象,并不与该类的对象相关联! aka:每个static数据成 ...

  6. windows下同时安装python2与python3

    由于python2与python3并不相互兼容,并且差别较大,所以有时需要同时安装,但在操作命令行时,怎么区别python2与python3呢? 1.下载并安装Python 2.7.9和Python ...

  7. mysql 建表语句

    修改id为自动增长: alter table book b_ISBN int(11) auto_increment;   自动增长要加的:auto_increment 基本的sql语句: 选择:sel ...

  8. svn: warning: 'xxxxxx' is already under version control

    [root@NGINX-APACHE-SVN pm]# svn status ? plugins ? files ? images ? data ? resources [root@NGINX-APA ...

  9. Shell脚本入门与应用

    编写第一个shell脚本 如同其他语言一样,通过我们使用任意一种文字编辑器,比如 nedit.kedit.emacs.vi 等来编写我们的 shell 程序.程序必须以下面的行开始(必须方在文件的第一 ...

  10. Android图形基础

    Android图形基础 Android在其android.graphics包中提供了完整的本机二维图像库. Color类,代表颜色,是用4个数字表示的,透明度.红色.绿色和蓝色(Alpha.Red.G ...