html5,拖拽元素

本文介绍了HTML5中的拖拽API,包括拖拽元素和目标元素的各类事件,如ondragstart、ondragleave、ondragend、ondragenter、ondragover和ondrop。通过实例展示了如何实现元素内容的拖放操作,并强调了在使用ondrop事件时需要阻止ondragover事件的默认行为。
摘要由CSDN通过智能技术生成

        本文主要是记录一下自己学习html中的进度,未来可以回来复习一下。

        本文参考了@冯小东的文章——html5,拖拽api    

        链接:点击打开链接

        html5中新增了拖拽事件,其中分为拖拽元素的事件,和目标元素的事件。

        使用时需要给拖拽元素添加dragable="true"

        拖拽元素的事件有:ondragstart事件 开始拖拽时触发

                                      ondragleave事件 鼠标离开拖拽元素触发

                                      ondragend事件 结束拖拽触发

        目标元素的事件有:ondragenter事件 拖拽元素进入时触发

                                       ondragover事件 停止在目标元素时触发

                                       ondrop事件 当在目标元素上松开鼠标时调用。此方法默认被阻止,

                                        如需使用请阻止ondragover事件的默认行为(给ondragover事件添加 事件名.preventDefault())

         以下是我第一次使用此方法是所做的内容,将一个div中的内容移动到另一个中

        


                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值