HTML 拖放API

_Kayo_2025-12-26 11:04

https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

是否允许拖放的属性draggable

draggable属性可用于DOM标签，设置为true表示可以拖动，为false表示不可以拖动。

其false和true必须显示设置，不能省略。

简单例子：

（以vue3代码为例）

在组件中定义div标签，给标签设置draggable="true"，这个div DOM就会变成能够拖拽的：

html 复制代码

<script setup lang="tsx">

</script>

<template>
  <div draggable="true">
    hello world
  </div>
</template>

其他拖放设置：

通过绑定事件的形式，给DOM添加事件，可以改变DOM元素在拖拽时的表现：

以dragend为例，dragend在元素拖拽操作结束时触发，比如我想在div拖拽结束时，弹出alert弹框：

html 复制代码

<script setup lang="tsx">
const dragend = ()=>{
  alert('dragend')
}
</script>

<template>
  <div 
    draggable="true"
    @dragend="dragend"
  >
    hello world
  </div>
</template>

拖拽结束，放开鼠标的时候会显示弹框：