HTML5- 拖拽功能

HTML5- 拖拽功能

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

对应还提供了以下方法:

  • dragstart

    • 开始拖拽时触发
  • dragend

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

    • 拖拽进入时触发
  • dragleave

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

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

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

      box.ondragover = fucntion (e){
          e.preventDefault()
      }
      
相关推荐
中工钱袋6 分钟前
Vue 中地址栏参数与 HTTP 请求参数的同步问题
前端·vue.js·http
zzlyx9910 分钟前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
秋月华星2 小时前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
—Qeyser3 小时前
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
javascript·游戏·html
千里码aicood3 小时前
[含文档+PPT+源码等]精品基于Python实现的校园小助手小程序的设计与实现
开发语言·前端·python
青红光硫化黑3 小时前
React基础之React.memo
前端·javascript·react.js
大麦大麦3 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass
NoBarLing4 小时前
python将目录下的所欲md文件转化为html和pdf
python·pdf·html
m0_616188495 小时前
Vue3 中 Computed 用法
前端·javascript·vue.js
六个点5 小时前
图片懒加载与预加载的实现
前端·javascript·面试