四时宝库

程序员的知识宝库

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

⒈什么是拖拽?

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

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

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

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

⒊相关的事件

应用于被拖拽元素的事件

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

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

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

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

应用于目标元素的事件

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

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

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

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

案例:





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

来源网络,侵权联系删除

私信我或关注微信号:猿来如此呀,回复:学习,获取免费学习资源包。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接