html没有拖拽编程效率高,HTML的拖拽接口,老程序员经验总结,纯!干!货

原标题:HTML的拖拽接口,老程序员经验总结,纯!干!货

⒈什么是拖拽?

本质上来说就是一个对象和一个对象直接传递。

其实学习拖拽,就是学习拖拽事件。

⒉在HTML5中很多元素是不能进行拖拽的,比如说图片和超链接:

在试图拖拽时你会发现一个禁止的符号,如果想拖拽元素,就必须为元素添加draggable="true"。

⒊相关的事件

应用于被拖拽元素的事件

ondrag 应用于拖拽元素,整个拖拽过程都会调用--持续

ondragstart 应用于拖拽元素,当拖拽开始时调用

ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素,当拖拽结束时调用

应用于目标元素的事件

ondragenter 应用于目标元素,当拖拽元素进入时调用

ondragover 应用于目标元素,当停留在目标元素上时调用

ondrop 应用于目标元素,当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素,当鼠标离开目标元素时调用

案例:

088f2134af5ca04ff2ff2da5e6956b8c.png

af4d82db0d5816a4295fda72c8467aef.png

5c58ac7400c00bea2e1bcf487191a1c7.png

注意:如果想触发ondrop事件,那么就必须在ondragover事件中阻止浏览器的默认行为。

来源网络,侵权联系删除返回搜狐,查看更多

责任编辑:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值