uni-app中实现元素拖动

uni-app中实现元素拖动

1、代码示例

<template><movable-area class="music-layout"><movable-view class="img-layout" :x="x" :y="y" direction="all"><img :src="musicDetail.bgUrl" :class="[ isPlay ? 'rotate-img' : '']" @click="onImgClick"><view class="small-circle"></view></movable-view></movable-area>
</template><script>
export default {name: "music-icon",props: {musicDetail: {type: Object,default: {}}},data() {return {innerAudioContext: {},x: 300,y: 500,isPlay: true,}},watch: {musicDetail: {handler(newVal, oldVal) {if (newVal.music) {this.handlePlay();}},immediate: true}},methods:{handlePlay() {this.innerAudioContext = uni.createInnerAudioContext();this.innerAudioContext.src = this.musicDetail.music;this.innerAudioContext.startTime = 0;this.innerAudioContext.play();this.innerAudioContext.loop = true; // 循环播放},onImgClick() {this.isPlay = !this.isPlay;if (this.isPlay) {this.innerAudioContext.play();} else {this.innerAudioContext.pause();}}}
}
</script><style scoped lang="scss">.music-layout {height: 100vh;width: 750rpx;top: 0;position: fixed;pointer-events: none; //鼠标事件可以渗透
}.img-layout {position: relative;width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;pointer-events: auto; //恢复鼠标事件img {width: 100%;height: 100%;border-radius: 50%;}.small-circle{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 20rpx;height: 20rpx;background-color: white;border-radius: 50%;}
}.rotate-img {width: 80rpx;height: 80rpx;border-radius: 50%;transform-origin: center center;animation: rotate 5s infinite linear;
}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
</style>

利用的是uni-app中的movable-area和movable-view两个组件配合实现

2、效果图展示