js拖拽事件及效果

本文介绍了HTML5中的拖放功能,包括ondragstart事件在被拖动元素上的触发,ondragover事件用于控制数据放置位置并需阻止默认行为,以及ondrop事件处理释放数据时的操作,同时强调了draggable属性设置为true使元素可拖动,并需在ondragstart中设置拖动数据的类型和值。

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

首页介绍一下三个事件一个属性:

分别是    

 ondragstart当元素被拖动时触发事件,此事件写在被拖动元素的身上使用。

ondragover事件规定被拖动的数据能够被放置到何处,此事件应用在被放置的元素身上使用。

ondrop事件,当放开数据时会发生drop事件,此事件应用在被放置的元素身上使用。

draggable属性设置为true,即为该元素可被拖动,写在被拖动元素身上。

ondragstart触发函数 需要在函数体内设置拖动数据的数据类型和值e.dataTransfer.setData("text",e.target.id)

ondragover事件函数体内需要阻止默认行为e.preventDefault()

ondrop事件函数体内需要阻止默认行为并获取被拖动元素的id,加入到该元素标签内

2487875392d648a38eae34b02488af56.png

 24f3841857674a54b38fef55c0e4728f.png

175b1bd113134149ad11c8de86bc2079.png 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值