HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      复制代码
      box.ondragover = fucntion (e){
          e.preventDefault()
      }
相关推荐
笔尖的记忆15 小时前
【前端架构和框架】react中Scheduler调度原理
前端·面试
_advance15 小时前
我是怎么把 JavaScript 的 this 和箭头函数彻底搞明白的——个人学习心得
前端
右子15 小时前
React 编程的优雅艺术:从设计到实现
前端·react.js·mobx
清灵xmf15 小时前
npm install --legacy-peer-deps:它到底做了什么,什么时候该用?
前端·npm·node.js
超级大只老咪16 小时前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒16 小时前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只16 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience17 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹17 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo17 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端