当前位置：首页 > news >正文

H5中的draggable

news 文章来源：https://blog.csdn.net/m0_51431448/article/details/132130403 2025/5/15 11:27:02

基本语法及事件

draggable 属性规定元素是否可拖动。必须设置，否则没有拖拽效果及事件触发

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作

语法

<element draggable="true|false|auto">

值	描述
true	规定元素是可拖动的。
false	规定元素是不可拖动的。
auto	使用浏览器的默认特性。

在拖放过程中会触发以下事件：

在拖动目标上触发事件（源元素），作用于被拖拽元素上

ondragstart - 开始拖动元素触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

<div id="app"><div class="drag" draggable="true"></div><div class="target"></div>
</div><script>const drag = document.querySelector('.drag')const target = document.querySelector('.target')drag.addEventListener('dragstart', ondragstart)drag.addEventListener('drag', ondrag)drag.addEventListener('dragend', ondragend)function ondragstart(event) {console.log('开始拖动')}function ondrag(event) {console.log('正在拖动')}function ondragend(event) {console.log('完成拖动')}
</script>

作用于目标元素

ondragenter - 进入其容器范围内触发（当被鼠标拖动的源元素进入目标容器范围内时触发）
ondragover - 被拖动的源对象在目标容器中拖动时触发
ondragleave - 拖动的对象离开目标容器时触发
ondrop - 释放鼠标时触发

Event.preventDefault

阻止默认事件，在ondragover中一定要执行preventDefault方法，否则ondrop不会被触发

<div id="app"><div class="drag" draggable="true"></div><div class="target"></div>
</div><script>const drag = document.querySelector('.drag')const target = document.querySelector('.target')target.addEventListener('dragenter', ondragenter)target.addEventListener('dragover', ondragover)target.addEventListener('dragleave', ondragleave)target.addEventListener('drop', ondrop)function ondragenter(event) {console.log('进入入其容器范围内触发')}function ondragover(event) {event.preventDefault()console.log('容器中拖动时触发')}function ondragleave(event) {console.log('离开目标容器时触发')}function ondrop(event) {console.log('释放鼠标时触发')}
</script>

DataTransfer

在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。它可以保存一项或多项数据、一种或多数数据类型。通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。

setData(type, data): 用于声明所发送的数据
getData(type)：用于获取指定type的数据注意：只能在ondrop中获取的到
clearData(type)：用于清除指定类型的数据

<div id="app"><div class="drag" draggable="true"></div><div class="target"></div>
</div><script>const drag = document.querySelector('.drag')const target = document.querySelector('.target')drag.addEventListener('dragstart', dragstart)target.addEventListener('dragover', ondragover)target.addEventListener('drop', ondrop)function dragstart(event) {event.dataTransfer.setData('comp', JSON.stringify({name: 'WFT'}))}function ondragover(event) {event.preventDefault()}function ondrop(event) {let data = JSON.parse(event.dataTransfer.getData('comp'))console.log(data)// ...// 处理完数据 最后清除一下event.dataTransfer.clearData()}
</script>

在其它的事件(如ondragover、ondragleave等），是无法获取dataTransfer里面的值了。这是由于W3C要求对dataTransfer里的值进行保护[参考]。因此，如果需要在这些事件里获取数据，只能通过一个全局变量等其它方式来实现了。

event.dataTransfer.setDragImage(p_w_picpath, x, y)

setDragImage方法用于在拖放操作过程中，修改鼠标指针所指向的图像

示例一：

先看效果：

先说一下，这种和鼠标去拖拽某个元素跟着鼠标移动一直移动不一样的，那种核心用到三个鼠标事件是 onmousedown、onmousemove、onmouseup。咱们这种是拖拽、就是本身是不动的状态

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div class="drag" draggable="true"></div><div class="target"></div></div><script>const drag = document.querySelector('.drag')const target = document.querySelector('.target')drag.addEventListener('dragstart', dragstart)target.addEventListener('dragover', ondragover)target.addEventListener('drop', ondrop)let curDragDom = nulllet curOffsetX = 0let curOffsetY = 0// 开始拖拽function dragstart(event) {curDragDom = thiscurOffsetX = event.offsetXcurOffsetY = event.offsetY}// 在目标元素中拖拽 移除掉默认事件 否则不会触发 drop事件function ondragover(event) {event.preventDefault()}// 在目标容器中松开鼠标function ondrop(event) {if(!curDragDom) returnlet copyDom = curDragDom.cloneNode(true)copyDom.style.position = 'absolute'const { x, y } = this.getBoundingClientRect()copyDom.style.left = event.clientX - x - curOffsetX + 'px'copyDom.style.top = event.clientY - y - curOffsetY + 'px'copyDom.removeAttribute('draggable')this.appendChild(copyDom)}</script><style>* {padding: 0;margin: 0;box-sizing: border-box;}#app {width: 100vw;height: 100vh;padding: 50px 0 0 50px;box-sizing: border-box;display: flex;}.drag {width: 100px;height: 100px;background-color: red;}.target {width: 400px;height: 400px;border: 1px solid red;margin-left: 200px;position: relative;overflow: hidden;}</style>
</body>
</html>

示例二：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div class="upload" draggable="true"><div>将文件拖到此处进行上传</div></div><div class="images"></div></div><script>const upload = document.querySelector('.upload')const imageContainer = document.querySelector('.images')upload.addEventListener('dragover', ondragover)upload.addEventListener('drop', ondrop)function ondragover(event) {event.preventDefault()}function ondrop(event) {event.preventDefault()const { files } = event.dataTransferArray.from(files).forEach(blob => {const url = window.URL.createObjectURL(new Blob([blob]))const img = document.createElement('img')img.src = urlimageContainer.appendChild(img)})}</script><style>* {padding: 0;margin: 0;box-sizing: border-box;}#app {width: 100vw;height: 100vh;padding: 50px 0 0 50px;box-sizing: border-box;}.upload {width: 360px;height: 180px;border: 1px dashed #c0c4cc;border-radius: 5px;display: flex;justify-content: center;align-items: center;}.upload > div {color: #606266;font-size: 14px;}.images {width: 100%;display: flex;flex-wrap: wrap;margin-top: 10px;}.images img {width: 300px;height: 180px;margin-right: 20px;}</style>
</body>
</html>

H5中的draggable

基本语法及事件

在拖动目标上触发事件（源元素），作用于被拖拽元素上

作用于目标元素

Event.preventDefault

DataTransfer

event.dataTransfer.setDragImage(p_w_picpath, x, y)

示例一：

示例二：

相关文章：

H5中的draggable

搭建SVN服务器

OpenCV之信用卡识别实战

Detector定位算法在FPGA中的实现——section1 原理推导

心电信号去噪：方法与应用

睡眠助手/白噪音/助眠夜曲微信小程序源码下载附教程

Spring Cloud常见问题处理和代码分析

debian怎么修改man help为中文，wsl怎么修改显示语言为中文

k8s概念-亲和力与反亲和力

【数据结构】实现单链表的增删查

Vue2 第二十节 vue-router （四）

第三章图论 No.1单源最短路及其综合应用

❤ npm不是内部或外部命令,也不是可运行的程序或批处理文件

关于Godot游戏引擎制作流水灯

C语言函数指针详解

LNMP及论坛搭建

【使用机器学习和深度学习对城市声音进行分类】基于两种技术（ML和DL）对音频数据（城市声音）进行分类（Matlab代码实现）

Godot 4 练习 - 制作粒子

Java基础继承详解

如何维护你的电脑：打造IT人的重要武器

【雕爷学编程】MicroPython动手做（31）——物联网之Easy IoT 3

Elasticsearch 快照和恢复

Packet Tracer - 检验 IPv4 和 IPv6 编址

PHP8的表达式-PHP8知识详解

亚马逊云科技七项生成式AI新产品生成式AI，为用户解决数据滞后等难题

图片等比例显示全部，兼容不同宽高比例图片

·[K8S：使用calico网络插件]：解决集群节点NotReady问题

泊松损坏图像的快速尺度间小波去噪研究（Matlab代码实现）

服务器端开发-golang dlv 远程调试

STM32F103——时钟配置