HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      复制代码
      box.ondragover = fucntion (e){
          e.preventDefault()
      }
相关推荐
曾富贵11 分钟前
【eslint】快速配置
前端
阿珊和她的猫19 分钟前
Webpack Loader 和 Plugin 实现原理详解
前端·webpack·node.js
做怪小疯子24 分钟前
JavaScript 中Array 整理
开发语言·前端·javascript
香香爱编程41 分钟前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
牧野星辰1 小时前
eslint你不懂的都在这里,不信你进来看嘛~
前端·eslint
FogLetter1 小时前
设计模式奇幻漂流:从单例孤岛到工厂流水线
前端·设计模式
ohyeah1 小时前
深入理解 JavaScript 数组:从创建到遍历的完整指南
前端·javascript
逛逛GitHub1 小时前
GitHub 开源 AI 好玩神器,自动记录你的一天。
前端·github
hollyhuang1 小时前
正则校验:校验只能输入数字且首位不能是0
前端
一室易安1 小时前
模仿elementUI 中Carousel 走马灯卡片模式 type=“card“ 的自定义轮播组件 图片之间有宽度
前端·javascript·elementui