html图片不能拖动,关于html5图片拖动的代码的问题?

6ca34726421259aacde2a5a8ed5f6a47.png

不负相思意

一、关于拖拽API拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。二、什么是拖拽和释放?拖拽:Drag释放:Drop拖拽指的是鼠标点击源对象后一直移动对象不松手,一但松手即释放了三、什么是源对象和目标对象?源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等。目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。四、拖拽API的相关函数解释了什么是源对象和目标对象后,回归前端中的拖拽API,由上面的操作我们可以得出几个函数被拖动的源对象可以触发的事件:(1)ondragstart:源对象开始被拖动(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)(3)ondragend:源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件:(1)ondragenter:目标对象被源对象拖动着进入(2)ondragover:目标对象被源对象拖动着悬停在上方(3)ondragleave:源对象拖动着离开了目标对象(4)ondrop:源对象拖动着在目标对象上方释放/松手拖拽API总共就是7个函数!!五、如何在拖动的源对象事件和目标对象事件间传递数据HTML5为所有的拖动相关事件提供了一个新的属性:e.dataTransfer { } //数据传递对象功能:用于在源对象和目标对象的事件间传递数据源对象上的事件处理中保存数据:e.dataTransfer.setData( k, v ); //k-v必须都是string类型目标对象上的事件处理中读取数据:var v = e.dataTransfer.getData( k );

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值