HTML5拖拽

本文介绍了HTML5的拖拽上传功能,详细讲解了拖拽事件的触发顺序,包括ondragstart、ondrag、ondragend、ondragenter、ondragover、ondragleave和ondrop。特别强调了在ondragover事件中阻止默认行为的重要性,以及dataTransfer对象在数据传递中的作用。此外,还讨论了如何自定义放置目标,通过修改dropEffect和effectAllowed属性控制拖放操作类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5拖拽上传

本片基于Chrome浏览器

设置可拖拽

Chrome浏览器中使用draggable=true来实现拖拽

<div id="div1" draggable="true">拖拽当前元素</div>
一、拖拽事件

拖拽事件目标分两类:被拖拽元素目标元素

1.被拖拽元素

拖拽事件触发的顺序如下:

  1. ondragstart : 拖拽的一瞬间触发
  2. ondrag : 拖拽期间连续触发
  3. ondragend : 拖拽结束触发
2.目标元素

目标元素事件触发的顺序如下:

  1. ondragenter : 进入目标元素触发
  2. ondragover : 在目标元素内部持续触发
  3. ondragleave/ondrop(两者触发其一) : 离开目标元素触发,在目标元素上释放鼠标触发

注意:默认状态下,一个元素不能放另一元素的上面,需要在ondragover事件里面阻止默认事件

demo:网址——————————————————

遇到问题:为何ondrop事件无法触发?

答:有些元素默认不允许放置,无法触发ondrop事件,需要重写dragenter和dragover的默认行为。

二、dataTransfer对象(数据转换)

dataTransfer是事件对象的一个属性,用于从被拖动元素向目标元素传递字符串形式的数据

主要方法有setData,getdata两个方法设置数据和接受数据。

setData 接受两个参数,第一个参数是字符串,表示保存的数据类型,第二个参数是数据内容。

getData 接受一个参数,与setData的第一个参数一样。

支持MIME类型的(IE10一下不支持)MIME

保存在dataTransfer对象中的数据智能在drop事件处理程序中读取。

e.dataTransfer.setData("text","文本");
var text = e.dataTransfer.getData("text");
e.dataTransfer.setData("URL","http://www.baidu.com/");
var url = e.dataTransfer.getData("URL");

自定义放置目标

有的时候我们拖动的元素放置在无效的目标上的时候是不会产生任何效果的,因为这些元素默认是不允许放置的,如果拖动元素经过不允许放置的元素是不会触发drop事件的。

可以将任何元素变成有效的放置目标的方法:重写dragenter和,dragover的默认行为。

div2.addEventListener("dragenter", function (e) {
    e.preventDefault();
});
div2.addEventListener("dragover", function (e) {
    e.preventDefault();
});

属性

DataTransfer.dropEffect

获取当前所选拖放操作的类型,或将拖拽操作设置为新类型。值必须为none,copy,link或move中的一个。

不同的dropEffect属性值,鼠标的手形就会有不一样的表现

dropEffect属性的设置主要用在dragenter和dragover事件中,同时受effectAllowed属性影响。

DataTransfer.effectAllowed
提供可能的所有类型的操作。必须是none,copy,copyLink,copyMove,link,linkMove,move,all或uninitialized中的一个。

demo:
github

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值