uniapp,从父元素下拖拽一个子元素,到另一个父元素下
时间: 2024-01-25 20:05:04 浏览: 60
在uniapp中,可以通过使用`@touchstart`、`@touchmove`、`@touchend`等事件,结合一些计算,实现元素的拖拽效果。以下是一个简单的示例:
```html
<template>
<view class="container">
<view class="box" :style="boxStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">{{boxText}}</view>
<view class="target" :style="targetStyle"></view>
</view>
</template>
<script>
export default {
data() {
return {
boxText: '拖拽我',
boxStyle: {
top: '50px',
left: '50px'
},
targetStyle: {
top: '200px',
left: '200px'
},
startPageX: 0,
startPageY: 0,
initBoxTop: 50,
initBoxLeft: 50
}
},
methods: {
touchStart(e) {
this.startPageX = e.changedTouches[0].pageX
this.startPageY = e.changedTouches[0].pageY
this.initBoxTop = parseInt(this.boxStyle.top)
this.initBoxLeft = parseInt(this.boxStyle.left)
},
touchMove(e) {
let diffX = e.changedTouches[0].pageX - this.startPageX
let diffY = e.changedTouches[0].pageY - this.startPageY
this.boxStyle.top = this.initBoxTop + diffY + 'px'
this.boxStyle.left = this.initBoxLeft + diffX + 'px'
},
touchEnd(e) {
let boxRect = uni.createSelectorQuery().select('.box').boundingClientRect()
let targetRect = uni.createSelectorQuery().select('.target').boundingClientRect()
Promise.all([boxRect.exec(), targetRect.exec()]).then(res => {
let boxTop = res[0].top
let boxLeft = res[0].left
let targetTop = res[1].top
let targetLeft = res[1].left
let boxWidth = res[0].width
let boxHeight = res[0].height
if (boxTop + boxHeight > targetTop && boxTop < targetTop + boxHeight && boxLeft + boxWidth > targetLeft && boxLeft < targetLeft + boxWidth) {
this.boxText = '成功拖拽到目标区域'
} else {
this.boxText = '拖拽我'
this.boxStyle.top = '50px'
this.boxStyle.left = '50px'
}
})
}
}
}
</script>
<style>
.container {
position: relative;
width: 100%;
height: 100%;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
}
.target {
position: absolute;
width: 200px;
height: 200px;
top: 200px;
left: 200px;
border: 1px solid #000;
}
</style>
```
以上代码实现了一个简单的拖拽效果,当拖拽元素移动到目标区域时,会提示拖拽成功。如果拖拽元素移出目标区域,会将元素重置到初始位置。您可以根据自己的需求进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)