HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      复制代码
      box.ondragover = fucntion (e){
          e.preventDefault()
      }
相关推荐
Heo几秒前
先把 Rollup 搞明白,再去学 Vite!
前端·javascript·面试
狐篱4 分钟前
vite 和 webpack 项目使用wasm-pack 生成的 npm 包
前端·webassembly
閞杺哋笨小孩7 分钟前
内容平台-SEO 索引提交
前端·seo
苏打水com8 分钟前
HTML/CSS 核心考点详解(字节跳动 ToB 中台场景)
java·前端·javascript
jingling5558 分钟前
react | 从零开始:使用 Create React App 创建你的第一个 React 项目
前端·javascript·react.js
nnnnna12 分钟前
watch监听(一篇文章彻底搞懂watch监听)
前端·vue.js
科普瑞传感仪器16 分钟前
基于六维力传感器的机器人柔性装配,如何提升发动机零部件装配质量?
java·前端·人工智能·机器人·无人机
步步为营DotNet18 分钟前
深入理解IAsyncEnumerable:.NET中的异步迭代利器
服务器·前端·.net
JackieDYH20 分钟前
CSS滚动吸附详解:构建精准流畅的滚动体验-scroll-snap-type
前端·css