前端系列——HTML5,Vue拖拽
2025-01-29
前端系列——HTML5,Vue拖拽
- HTML5拖拽
-
- 拖拽目标触发的事件
- 释放目标时触发的事件
- 阻止默认事件方法执行
- DataTransfer传递媒介
-
- 方法
-
- 设置自身
- 设置图像
- 示例代码1
-
- 效果截图
- 示例代码2
-
- 效果截图
- Vue-Draggable插件拖拽
-
- 文档
- 安装
- 导入
HTML5拖拽
使用属性draggable即可实现对于元素的拖拽
<div draggable="true" id="test1"></div>
拖拽目标触发的事件
- ondragstart: 开始拖拽触发
- ondrag: 正在拖拽触发
- ondragend: 结束拖拽触发
释放目标时触发的事件
- ondragenter:进入容器内触发
- ondragover:拖动对象在另一个对象容器范围内触发
- ondragleave:拖动对象离开容器触发
- ondrop:释放鼠标触发
阻止默认事件方法执行
Event.preventDefault()
阻止默认的些事件方法等执行。在ondragover中一 定要执行preventDefault(), 否则ondrop事件不会被触
另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,还是真的执行drop。此时需要用document的ondragover事件把它直接干掉
DataTransfer传递媒介
Event.dataTransfer()
用于保存拖动并放下过程中的数据
方法
- setData(type,data):声明所发送的数据与类型
- getData(type):返回指定类型的数据
- clearData(type):删除指定类型的数据
- setDragImage(ImageObject,x,y):设置鼠标选中图像
设置自身
event.dataTransfer().setDragImage(event.target,0,10)
设置图像
const image = new Image()
image.src = '图片位置'
event.dataTransfer().setDragImage(image,0,10)
示例代码1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D