掌握和学习HTML5里和拖拽相关的七个事件推荐 亲测 原创 收藏

文章标签: 拖拽 event
  • :
  • 03-17 14:06
  • :
  • 210次
  • :
  • 0条
  • 2赞

简介本文通过一个具体的实例演示来讲解HTML5里和拖拽相关的七个事件,让你明白和了解七个事件的具体含义。

“拖拽”是HTML5里新添加的特效和事件,比如我们在上传时,可以把文件直接拖放到上传区域里,就能直接上传,使用的就是HTML5里的“拖拽”。

我们想要实现这样的效果,就需要先了解和学习一下HTML5里关于"拖拽"的事件及内容:

ondrag            当拖动元素时

ondragend      当拖动操作结束时  

ondragenter    当元素被拖动至有效的拖放目标时

ondragleave    当元素离开有效拖放目标时

ondragover     当元素被拖动至有效拖放目标上方时

ondragstart     当拖动操作开始时

ondrop            当被拖动元素正在被拖放时

注意:使用jquery来给标签元素绑定事件时,要把on去掉,如:

$("#drag").on("drag",function(e){$info.append('P#drag的ondrag事件开始!<br>');});

如果用js的方法的话,就不用去掉,如:

document.getElementByID("#drag").addEventListener('dragenter', function(e) {//开始drag;}, false);

只看上面的文字内容的话,肯定不太好理解,没关系,站长给大家准备了个演示拖拽时各个事件的在线实例:

HTML5里拖拽时各个事件的在线演示

大家点开上面的链接,可以自己动手操作演示一下,就会很好理解了!

不想点开上面的在线演示,也没关系,站长来给大家一步步操作,解释一下:

实例很简单,蓝色虚线的是DIV#drop; 红色边框的是P#drag;我们要做的就是把P拖放到DIV里,当然,这个实例只是用来展示拖拽时的各个事件,没有附加其它操作的。

下面的绿色框是用来显示各个事件的:

七个事件里,有几个事件是“持续性”的事件,所以记录更新的很快,大家最好可以自己动手多操作几次,下面站长复制出来其中一次操作的结果:

//为了你阅读的方便,站长直接在这个记录上来添加相关的解释:
P#drag的ondragstart事件开始!    //p 是我们要拖拽的对象,ondragstart表示开始拖拽,即“拖拽”这个动作的起点
P#drag的ondrag事件开始!    //ondrag 表示我们开始了拖拽

//自己动手测试几次就能发现,P上的ondragenter ondragover 和ondragleave事件,如果我们动作快一点,有时是不显示的
//因为这三个动作本来针对的就是“容器”,
//这里之所以会显示出来,是因为我们拖着P在往DIV里放时,在还没有进入到div的范围,还处在P的范围内。
P#drag的ondragenter事件开始!
P#drag的ondragover事件开始!
P#drag的ondrag事件开始!  //这里ondrag又出来了,表示ondrag是个“持续性”的事件
P#drag的ondragleave事件开始!
P#drag的ondrag事件开始!
P#drag的ondrag事件开始!

//这里就表示我们拖着P进入到了DIV窗口的范围,激发了div的ondragenter事件
Div#drop的ondragenter事件开始!

//ondragover也是一个“持续性”的事件,在我们进入到“窗器”后,如果没有松开鼠标,会一直激发
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!    //在我们没有松开鼠标时,一直拖着P  所以会一直激发P的ondrag事件
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!
Div#drop的ondragover事件开始!
P#drag的ondrag事件开始!

//到这里,我们放开了鼠标,所以激发了容器的ondragleave事件和拖拽对象的ondragend事件
Div#drop的ondragleave事件开始!
P#drag的ondragend事件开始!

所以,通过上面的这个实例,我们可以把七个事件分类整理一下:

针对要拖拽的对象:

ondragstart  :只发生一次,发生在我们开始拖拽时;

ondrag  :    持续性事件,发生在我们拖拽的过程中;

ondragend  : 只发生一次,发生在我们结束拖拽时;

针对“容器”:

ondragenter  :只发生一次,发生在我们要拖拽的对象进入容器时;

ondragover  : 持续性事件,发生在我们拖拽的对象进入容器后,还没有结束拖拽操作之间;

ondragleave  :  只发生一次,发生在我们结束拖拽;

ondrop :           只发生一次,发生在结束拖拽,完成了拖拽操作之时;

到这里,要注意了,上面我发的截图里,只有六个事件,为什么少了一个ondrop事件呢?因为我们要调用ondrop事件的话,必须在ondragover事件里加上一句:e.preventDefault();(这句的意思是阻止默认的操作),不加这一句,是不会激发ondrop事件的,加上e.preventDefault() 表示我们允许“释放”正拖拽的对象。

//站长写文章不容易,转发请备注 本文首发:爱jQuery www.aijquery.cn

这里再把站长提供的在线演示的地址发一下HTML5里拖拽时各个事件的在线演示

另外,这里是站长以前分享的一偏和“拖拽”相关的文章,可以从本地把图片拖拽到网页里,并显示图片,可以用在做上传功能里:jquery拖拽上传,并预览图片的具体方法及实例



您正在找的文章可能是: