vue项目实现堆叠卡片拖动切换效果

实际效果

实现流程

1. 实现卡片位置堆叠

将父元素的 position 设置成relative ,卡片的position 设置成 absolute 即可。

2. 消除图片的移动

如果卡片上有图片,默认拖动的时候就会导致像上图一样变成了选中图片移动,从而没法触发拖动事件。消除图片移动的方式就是在标签上添加ondragstart="return false;" 事件

html 复制代码
<el-image ondragstart="return false;" :src="" fit="fill" alt=""/>

3. 实现拖动事件

在卡片组件上添加@mousedown, 和 @mouseup 事件。监听鼠标的按下和抬上。当按下时记录鼠标的位置。然后给document 注册 mousemove 事件监听鼠标滑动时的位置,这个位置差代表卡片要滑动的距离,通过改变卡片的transform 样式实现卡片的切换。鼠标抬起时取消滑动事件以及处理卡片(删除或者复位)。

html 复制代码
<UserDetail class="card" :data="item" v-for="(item, index) in matchUsers" 
            @mousedown.stop="handleMouseDown($event)"
            @mouseup.stop = "handleMouseUp($event, index)"
            />
js 复制代码
// 记录按下的位置
    const position_X = ref(0)
    // 记录移动的当前位置
    const cur_X = ref(0)
    // 记录卡片元素
    const card = ref({})
    // 鼠标按下事件
    function handleMouseDown(event){
        // 获得最上方的卡片元素
        card.value = document.getElementsByClassName('card')[pageData.matchUsers.length - 1]
     	// 给两个位置赋初值
        position_X.value = event.clientX
        cur_x.value = event.clientX
        // 注册移动事件
        document.addEventListener('mousemove', handleMouseOver)
    }
    // 鼠标移动时设置卡片旋转移动
    function handleMouseOver(e){
        cur_X.value =  e.clientX
            // card.value.style.left = (cur_x - position_X.value) + 'px'
            card.value.style.transform = `translate(${cur_X.value - position_X.value}px, 0px) rotate(${(cur_X.value - position_X.value) / 20}deg)`;
    }
    // 鼠标抬起,移除移动事件,如果偏移量超过200则将卡片删除,否则复位。
    function handleMouseUp(event, index){
        document.removeEventListener('mousemove', handleMouseOver)
        if(cur_X.value - position_X.value > 200 || cur_X.value - position_X.value < -200){
            pageData.matchUsers.splice(index, 1)
        }else{
            card.value.style.transform = `translate(0px, 0px) rotate(0deg)`;
        }
    }
相关推荐
fruge4 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician5 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng8 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科9 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20169 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao200911 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔11 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼11 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder11 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js