使用原生HTML的drag实现元素的拖拽

请添加图片描述

HTML 拖放Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。🔍MDN: HTML 拖放 API

1.draggable 属性:设置元素可以拖拽。true 表示元素可以被拖动,false 表示元素不可以被拖动。

注意:像 <img draggable> 这样的简写是不允许的。正确的用法是 <img draggable="true">

2.@dragstart:在拖拽开始时,将当前拖拽项的索引存储到 draggedIndex,并设置拖拽光标的效果为 move。更新 draggedIndex 实现拖拽过程中的预览。

3.@dragover.prevent:当拖拽项经过其他项时,通过 splice 方法将当前拖拽项临时移除并插入到新的位置。

4.@drop:当拖拽放置完成时,draggedIndex 被重置,以防止任何临时变化影响最终顺序。

案例代码:
请添加图片描述

<template><div class="drag-container"><divv-for="(item, index) in items":key="item.id"class="draggable-item"draggable="true":class="{ selected: index === draggedIndex }"@dragstart="onDragStart($event, index)"@dragover.prevent="onDragOver(index)"@drop="onDrop(index)">{{ item.name }}</div></div>
</template><script setup>
import { ref } from "vue";// 定义拖拽的数据
const items = ref([{ id: 1, name: "项 1" },{ id: 2, name: "项 2" },{ id: 3, name: "项 3" },{ id: 4, name: "项 4" },
]);// 用于存储当前被拖拽的元素的索引
const draggedIndex = ref(null);// 拖拽开始事件
const onDragStart = (event, index) => {draggedIndex.value = index;//   设置拖拽光标效果event.dataTransfer.effectAllowed = "move";console.log(`开始拖拽: ${items.value[index].name}`);
};// 拖拽经过目标时,临时预览排序效果
const onDragOver = (index) => {if (draggedIndex.value !== null && draggedIndex.value !== index) {//用 splice 方法将拖拽的项从原来的位置移除,并插入到新的位置const draggedItem = items.value.splice(draggedIndex.value, 1)[0];// 将 draggedItem 插入到 items 数组的 index 位置,从而实现排序的效果。items.value.splice(index, 0, draggedItem);// 更新 draggedIndex 以匹配新的位置draggedIndex.value = index;}
};// 拖拽放置事件
const onDrop = (index) => {// 拖拽完成后将索引重置draggedIndex.value = null;console.log(`放置到: ${items.value[index].name}`);
};
</script><style scoped>
.drag-container {margin-left: 30px;width: 100px;display: flex;flex-direction: column;gap: 10px;margin-top: 20px;
}.draggable-item {padding: 10px;background-color: #4caf50;color: white;cursor: grab;text-align: center;
}
/* 选中的拖拽项样式 */
.selected {border: 2px dashed #ff9800;
}
</style>

在vue中还可以使用第三方库vuedraggable 来实现拖拽:🔍vue3使用vuedraggable实现拖拽(有过渡)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3-print打印eletable某一行的数据

主页面的表格 <template><el-table :data"list"><el-table-column label"操作" align"center"><template #default"scope"><el-buttonlinktype"primary"click"handleType(scope.row)"…

java进销存系统源码:管店云进销存解决方案

在当今数字化转型的大背景下&#xff0c;企业对高效、可靠的进销存管理系统的需求日益增长。Java作为一种广泛使用的编程语言&#xff0c;以其成熟的技术栈和强大的生态系统&#xff0c;成为了开发高性能进销存系统的首选语言之一。本文将介绍一款基于Java进销存系统源码的“管…

c++刷题

17.电话号码的组合 来源于题解思路&#xff1a; 继承 CC14 KiKi设计类继承 #include <iostream> #include <memory> using namespace std; class Shape{ private:int x;int y; };class Rectangle:public Shape { public:Rectangle(int length,int width):Shape…

c语言中“typedef”关键字,对类型进行重命名

对类型简化:typedef关键字&#xff0c;是用来类型重命名&#xff0c;将复杂的类型简单化。 例如&#xff1a; typedef unsigned int unit; //将unsigned int 重命名为 uint. int main() { unsigned int num; uint num2; //重命名的可以直接引用。 re…

Kafka 的基本概念

一、Kafka 主要用来做什么 作为消息系统&#xff1a;Kafka 具备系统解藕&#xff0c;流量削峰&#xff0c;缓冲&#xff0c;异步通信&#xff0c;扩展性&#xff0c;可恢复性等功能&#xff0c;以及消息顺序性保障和回溯消费 作为存储系统&#xff1a;Kafka 把消息持久化到磁…

Cartographer源码理解

一、前言 最近一个半月&#xff0c;利用空余时间对Cartographer源码进行了简单的阅读&#xff0c;在这里做了个简单梳理&#xff0c;和大家分享交流。 cartographer源码量其实是有点大的&#xff0c;逐行逐句去解释实在是有心无力了&#xff0c;而且已经有大佬做了类似的事情…

Java笔试面试题AI答之单元测试JUnit(5)

文章目录 25. 简述什么是Junit 忽略测试&#xff08;Ignore Test&#xff09;&#xff1f;一、基本概念二、使用方法三、注意事项四、示例 26. 简述什么是Junit 超时测试&#xff08;Timeout Test&#xff09;&#xff1f;Junit 超时测试的主要特点包括&#xff1a;实现方式&am…

buildroot移植qt报错Info: creating stash file (补充qt添加字库)

移植qt库&#xff0c;编译文件报错Info: creating stash file /home/rbing/QT/uart/.qmake.stash Project ERROR: Unknown module(s) in QT: serialport rbingouc:~/QT/uart$ /home/rbing/linux/tool/buildroot-2022.02.9/output/host/usr/bin/qmake Info: creating stash fil…

一些写leetcode的笔记

标准库中的string类没有实现像C#和Java中string类的split函数&#xff0c;所以想要分割字符串的时候需要我们自己手动实现。但是有了stringstream类就可以很容易的实现&#xff0c;stringstream默认遇到空格、tab、回车换行会停止字节流输出。 #include <sstream> #incl…

部分动态铜皮的孤岛无法删除。报错

(SPMHCI-1): Cannot break shape into fragments. 网上寻找了很多答案&#xff0c;都不太理想&#xff0c;不是我想要的方法。 终于功夫不负有心人&#xff0c;在Cadence官方论坛找到了蛛丝马迹。 Breaking Static shape into fragments - PCB Design - PCB Design & IC …

枚举算法总结

枚举算法&#xff08;Enumeration Algorithm&#xff09;是一种简单而直接的算法设计策略&#xff0c;它通过列出问题的所有可能情况&#xff0c;逐一进行验证&#xff0c;直到找到问题的解。这种算法适用于问题的解空间不是太大&#xff0c;可以通过遍历所有情况来找到答案的情…

uniapp 做一个查看图片的组件,图片可缩放移动

因为是手机端&#xff0c;所以需要触摸可移动&#xff0c;双指放大缩小。 首先在components里建个组件 查看图片使用 uni-popup 弹窗 要注意 transform的translate和scale属性在同一标签上不会一起生效 移动就根据触摸效果进行偏移图片 缩放就根据双指距离的变大变小进行缩…

【 html+css 绚丽Loading 】 000052 璇玑转轮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

[网络]http的简单认识

文章目录 一. 什么是http二. http协议工作过程三. http协议格式1. 抓包工具fiddler2. http请求报文3. http响应报文 一. 什么是http HTTP (全称为 “超⽂本传输协议”) 是⼀种应⽤⾮常⼴泛的 应⽤层协议 HTTP 诞⽣与1991年. ⽬前已经发展为最主流使⽤的⼀种应⽤层协议 HTTP 往…

【Kubernetes】常见面试题汇总(十一)

目录 33.简述 Kubernetes 外部如何访问集群内的服务&#xff1f; 34.简述 Kubernetes ingress &#xff1f; 35.简述 Kubernetes 镜像的下载策略&#xff1f; 33.简述 Kubernetes 外部如何访问集群内的服务&#xff1f; &#xff08;1&#xff09;对于 Kubernetes&#xff0…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

[NOI2022]冒泡排序

题意&#xff1a; 有 n n n个数&#xff0c; m m m个限制&#xff0c;第 i i i个限制要求在 [ L i , R i ] [L_i,R_i] [Li​,Ri​]的最小值为 V i V_i Vi​&#xff0c;你要得到最小的逆序对数。 数据满足 n , m < 1 0 6 n,m<10^6 n,m<106。 思路&#xff1a; 最近感…

【C++二叉树】102.二叉树的层序遍历

107. 二叉树的层序遍历 II - 力扣&#xff08;LeetCode&#xff09; 思路分析&#xff1a; 层序遍历&#xff0c;但是要注意输出的结果是一个二维数组&#xff0c;不是一层一个值一个值的输出&#xff0c;而是要一层一层的输出。可以通过一个循环控制每一层的数据个数&#xff…

PyCharm 安装教程

传送门 PyCharm 是一款由 JetBrains 开发的强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它支持多种功能&#xff0c;包括调试、代码补全、智能代码分析、版本控制集成等&#xff0c;特别适合开发 Python 项目。接下来&#xff0c;我们将详细介绍如何在不同操作系…

【C++高阶】解锁C++的深层魅力——探索特殊类的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C 类型转换 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀C特殊类 &#x1f4d2;1. 不能被拷贝…