当前位置: 首页> 房产> 政策 > vue项目实现堆叠卡片拖动切换效果

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

时间:2025/7/11 8:32:56来源:https://blog.csdn.net/qq_44957574/article/details/140247379 浏览次数:0次

实际效果

在这里插入图片描述

实现流程

1. 实现卡片位置堆叠

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

2. 消除图片的移动

在这里插入图片描述

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

<el-image ondragstart="return false;" :src="" fit="fill" alt=""/>

3. 实现拖动事件

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

<UserDetail class="card" :data="item" v-for="(item, index) in matchUsers" @mousedown.stop="handleMouseDown($event)"@mouseup.stop = "handleMouseUp($event, index)"/>
// 记录按下的位置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.clientXcur_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)`;}}
关键字:vue项目实现堆叠卡片拖动切换效果

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: