HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      复制代码
      box.ondragover = fucntion (e){
          e.preventDefault()
      }
相关推荐
DianSan_ERP5 小时前
电商架构演进:如何在高并发场景下实现多平台API的标准化履约?
运维·前端·网络·安全·架构·自动化
碎_浪8 小时前
给键盘党的英语记忆工具:我做了一款「打字背单词」桌面应用
前端·程序员·ai编程
阿成学长_Cain9 小时前
Linux dirs命令详解|Bash目录堆栈管理快速切换目录实战教程
linux·运维·前端·数据库
yqcoder9 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
IT_陈寒9 小时前
Java的Stream.parallel()把我CPU跑爆了,这种优化要谨慎
前端·人工智能·后端
小皮虾10 小时前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
山河木马10 小时前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学
奔跑的蜗牛ing10 小时前
CentOS Nginx 安装与静态文件服务器配置指南
前端·面试·架构
子兮曰10 小时前
Bun 重写为 Rust:11天、64个Claude、16.5万美元,一次改变行业认知的激进实验
前端·后端·bun