HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      复制代码
      box.ondragover = fucntion (e){
          e.preventDefault()
      }
相关推荐
runepic11 小时前
Vue3 + Element Plus 实现PDF附件上传下载
前端·pdf·vue
程序员修心11 小时前
CSS 盒子模型与布局核心知识点总结
开发语言·前端·javascript
elangyipi12311 小时前
前端面试题:CSS BFC
前端·css·面试
程序员龙语11 小时前
CSS 核心基础 —— 长度单位、颜色表示与字体样式
前端·css
shuishen4911 小时前
视频尾帧提取功能实现详解 - 纯前端Canvas API实现
前端·音视频·尾帧·末帧
IT_陈寒11 小时前
Python性能调优实战:5个不报错但拖慢代码300%的隐藏陷阱(附解决方案)
前端·人工智能·后端
jingling55511 小时前
uni-app 安卓端完美接入卫星地图:解决图层缺失与层级过高难题
android·前端·javascript·uni-app
哟哟耶耶11 小时前
component-编辑数据页面(操作按钮-编辑,保存,取消) Object.assign浅拷贝复制
前端·javascript·vue.js
bjzhang7511 小时前
使用 HTML + JavaScript 实现可编辑表格
前端·javascript·html
指尖跳动的光11 小时前
js如何判空?
前端·javascript