首页 前端知识 HTML5- 拖拽功能

HTML5- 拖拽功能

2024-06-05 13:06:26 前端知识 前端哥 404 950 我要收藏

HTML5- 拖拽功能

​ HTML5新增了拖拽功能,但不是所有元素都能拖拽,如果希望该元素强制可以被拖拽,加一个行内属性 draggable="true"

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

    • 结束拖拽时触发
    • 给容器加入内容appendChild
  • dragenter

    • 拖拽进入时触发
  • dragleave

    • 拖拽离开时触发
  • drop(用在容器内)

    • 拖拽松手就触发
    • 需要与 dragover 事件结合使用,并且dragover结合e.preventDefalut()
  • dragover(用在容器内)

    • 默认行为:禁止任意元素被拖放进来,如果想禁止该默认行为:

      box.ondragover = fucntion (e){
          e.preventDefault()
      }
      
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10850.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!