效果示例图
代码功能
<template>
<movable-area class="movable-area">
<view class="dragExample-wrap">
<view class="dragExample-header" id="shopCard">
<view class="noData">
<image class="noData-icon" src="@/static/nodata/nodata_address.png"></image>
<text class="noData-text">长按下方商品拖入此处</text>
</view>
</view>
<view style="height: 200px;"></view>
<!-- 内容滚动区域-start -->
<scroll-view class="scrollView" :style="{'height':scrollheight+'px'}" :scroll-y="isScroll"
lower-threshold="60" @scrolltolower="scrolltolowerHandle">
<view class="dragExample-image">
<template v-for="item in 30">
<view class="dragExample-item" :key="item">
<image @longpress="longPressHandle" @touchstart="startHandle" @touchmove="moveHandle"
@touchend="endHandle" :data-src="tempUrl" :data-id="item" class="dragExample-item-img"
mode="widthFix" :src="tempUrl"></image>
</view>
</template>
</view>
</scroll-view>
<!-- 内容滚动区域-end -->
</view>
<!-- 可移动视图-start-->
<movable-view class="movable-view" :x="x" :y="y" damping="5000" direction="all">
<image class="movable-img" :src="moveUrl" v-if="hidden"></image>
</movable-view>
<!-- 可移动视图-end-->
</movable-area>
</template>
<script>
export default {
data() {
return {
tempUrl: 'https://scpic2.chinaz.net/files/default/imgs/2023-05-24/886064fd16ee10c0_s.jpg',
//滚动区域的高度
scrollheight: 320,
//拖动的基本数据
x: 0,
y: 0,
moveUrl: "",
hidden: false, //是否隐藏被拖动的图片
flag: false, //是否开始移动
isScroll: true, //是否允许滚动
};
},
onLoad() {
},
onShow() {
uni.getSystemInfo({
success: (res) => {
console.log("[xitong]", res.windowHeight)
this.scrollheight = res.windowHeight - 230;
}
})
},
methods: {
/**
* 向下滚动触发事件
* **/
scrolltolowerHandle() {
console.log("[movable-area-上拉加载更多]")
},
longPressHandle(e) {
this.moveUrl = e.target.dataset.src;
this.hidden = false;
this.flag = true;
this.isScroll = false;
},
startHandle(e) {},
moveHandle(e) {
if (this.flag) {
this.hidden = true;
const x = e.touches[0].pageX;
const y = e.touches[0].pageY;
this.x = x - 37;
this.y = y - 52;
}
},
/**
* 拖动结束
* **/
endHandle(e) {
const clientX = e.changedTouches[0].clientX;
const clientY = e.changedTouches[0].clientY;
const query = uni.createSelectorQuery().in(this);
query.select("#shopCard").boundingClientRect((rect) => {
if (clientX > rect.left && clientX < rect.right && clientY > rect.top && clientY < rect.bottom) {
this.dragEventAPI();
}
}).exec();
if (!this.flag) {
return;
}
this.hidden = false;
this.flag = false;
this.isScroll = true;
},
/**
* 图片拖入添加区域触发事件
* **/
dragEventAPI() {
console.log("[加入]")
},
}
}
</script>
<style lang="scss" scoped>
.movable-area {
width: 100%;
height: 100%;
.movable-view {
z-index: 200;
}
.movable-img {
width: 74px;
height: 103px;
}
}
.dragExample-wrap {
width: 91.47%;
margin: 12px auto;
display: flex;
flex-direction: column;
.dragExample-header {
border: 1px solid #334B61;
border-radius: 8px;
height: 200px;
position: fixed;
top: 0px;
left: 4.265%;
right: 4.265%;
z-index: 5;
background-color: #0e1021;
//暂无数据
.noData {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
.noData-icon {
width: 144.5px;
height: 47px;
}
.noData-text {
font-size: 15px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #FFFFFF;
margin-top: 12px;
}
}
}
.scrollView {
border: 1px solid #334B61;
border-radius: 8px;
width: 100%;
position: relative;
.dragExample-image {
width: 100%;
display: flex;
flex-wrap: wrap;
.dragExample-item {
--width: 23%;
width: var(--width);
height: auto;
margin: 6px calc((100% - var(--width)*4)/8);
.dragExample-item-img {
border-radius: 4px;
width: 100%;
height: auto;
display: block;
}
}
}
}
}
</style>