目前Vue中有很多可供拖拽的组件,但是没有能达到预期效果的,
大部分都是列表之前选项的相互移入和添加
1.使用方式:draggable = true
2.draggable作用: 属性规定元素是否可拖动。
3.预期效果:
本篇文章实现的效果是将三个不同形态的图片移入指定位置,如果不停留在对应位置则无法移入
每正确移入一个元素会播放音效,全部完成移入后有gif图片淡入淡出。
4.最终实现的效果:
拖拽效果演示.gif代码实现
<template>
<div class="box">
<!-- 可供拖拽的元素 -->
<div
draggable="true"
@dragstart="dragstart($event, item)"
@dragend="dragend($event, item)"
v-for="(item, index) in items"
:key="index"
>
<span class="item"> {{ item.moveIndex }}</span>
<img :src="item.img" class="pic">
</div>
<div class="drop-field">
<div v-for="(item,targetIndex) in targetItems" :key="item.targetIndex" @dragover.prevent>
<div class="empty-box" @drop="drop(item,targetIndex)" >
<img :src="item.img" class="pic" v-if="item.img !== ''">
</div>
{{item.targetIndex}}
</div>
</div>
<!-- 音频 -->
<div hidden="true">
<audio id="audioMusic" class="audio" src="../assets/tip.mp3" controls :autoplay="isPlay" hidden="true" ref="audio"></audio>
</div>
<!-- 视频 -->
<div class="success-box" v-if="allSuccess" :class="allSuccess?'show-animate':''">
<img src="../assets/images/success.gif" alt="">
</div>
</div>
</template>
<script>
</script>
<script>
export default {
data() {
return {
items: [
{ moveIndex: 1,label: '兔崽子',img: 'http://inews.gtimg.com/newsapp_bt/0/13574681470/1000'},
{ moveIndex: 2,label: 'pen', img: 'https://img.zcool.cn/community/00ad315954abf1a8012193a3289eda.jpg'},
{ moveIndex: 0,label: "猴子",img: 'https://c-ssl.duitang.com/uploads/item/202004/05/20200405102336_iasgg.thumb.1000_0.jpeg'},
],
currentImageUrl: '',
targetItems:[
{ targetIndex: 0, img:''},
{ targetIndex: 2, img:''},
{ targetIndex: 1, img:''},
],
currentMoveIndex: '',
targetItem: '',
emptyIndex: '',
isPlay: false, // 控制音频的播放
correctNumber: 0, // 统计正确安放的图片数量
allSuccess: false
};
},
mounted(){
},
methods: {
drop(event,index) {
console.log('drog')
this.emptyIndex = event.targetIndex
console.log('移到空白位置索引',this.emptyIndex)
},
dragstart(event, item) {
console.log('start的索引',item.moveIndex)
// 开始移动的时候将移动的索引值+图片的url存储下来
this.currentMoveIndex = item.moveIndex
this.currentImageUrl = item.img
},
dragend(event,item) {
console.log('dragend',item)
console.log('end的索引',this.currentMoveIndex)
// 校对移动的元素和当前移入到的元素索引是否匹配
if(this.emptyIndex === this.currentMoveIndex){
let index = this.targetItems.findIndex(v=> v.targetIndex === this.currentMoveIndex)
// 如果是则给图片列表中对应索引的img赋值
this.targetItems[index].img = this.currentImageUrl
// 同时计算成功的数量
this.calculateNumber()
// 如果是移动到正确的位置就产生音效
document.getElementById('audioMusic').play()
}else{
console.log('不在指定位置')
}
if(this.correctNumber === this.items.length){
this.allSuccess = true
setTimeout(() => {
this.allSuccess = false
},3000)
}
event.dataTransfer.clearData();
},
calculateNumber(){
this.correctNumber += 1
console.log('正确放置的元素数',this.correctNumber)
}
},
};
</script>
<style lang="scss" scoped>
.success-box{
position: absolute;
left: 500px;
top: 0;
img {
opacity: 1;
}
}
.show-animate img {
animation: move 3s linear infinite;
}
@keyframes move {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.box{
display: flex;
justify-content: center;
}
.item {
width: 150px;
height: 150px;
background: rgb(241, 241, 225);
}
.drop-field {
width: 300px;
background: lavender;
padding: 20px;
}
.pic{
width: 100px;
height: 100px;
}
.empty-box{
width: 100px;
height: 100px;
background: white;
}
</style>
此案例为简单demo,仅做参考,有疑问可以在评论提出。
网友评论