HTML5:新增属性draggable

本文详细介绍HTML5中draggable属性的使用及其与七个关键事件(dragstart, drag, dragend, dragenter, dragover, dragleave, drop)的关联,教你理解并实现流畅的拖放功能,以及如何阻止dragleave与drop冲突。
摘要由CSDN通过智能技术生成

draggable 拖拽

可拖拽:draggable='true';

(解释:复制了一个虚影)

拖拽的7个事件

绑定在目标元素上(3个事件)

1.dragstart

拖拽开始

2.drag

拖拽移动事件

3.dragend

结束拖拽

绑定在目标区域上(4个事件)

1.dragenter

进入目标区域时触发(一瞬间的触发);

2.dragover

在目标区域中时触发(始终触发状态);

3.dragleave

(不松开鼠标的情况下)离开目标区域时触发(可重复触发);

4.drop

在目标区域中松开鼠标时触发,并放下被拖拽的元素;

Attention:

鼠标松开的一瞬间,事件dragleave和事件drop不可共存,二者同时存在时,始终只能触发一个事件,而浏览器默认触发dragleave

若想触发drop事件,则需要在dragover事件中阻止dragleave事件的默认行为。

阻止方法:e.preventDefault();

解释:四个事件是一个连续触发的状态,上一个事件的结束往往是下一个事件的触发开始,所以在dragover中阻止事件的默认行为,即阻止的是dragleave的默认触发行为,从而实现drop事件的触发。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值