uniapp 拖拽
时间: 2023-07-06 12:13:51 浏览: 194
Uniapp 拖拽可以通过使用uni-dragger组件来实现。首先在页面中引入该组件:
```html
<uni-dragger direction="all" scale-area=".drag-area" :onDrag="onDrag" :onDragEnd="onDragEnd"></uni-dragger>
<div class="drag-area"></div>
```
其中,`direction`属性用于设置拖拽的方向,可以设置为`all`、`vertical`或`horizontal`。`scale-area`属性用于指定限制拖拽的区域,这里设置为`.drag-area`,需要在样式中设置该类名对应的区域。`onDrag`和`onDragEnd`分别为拖拽开始和结束时的回调函数。
接下来在页面的methods中定义这两个回调函数:
```js
onDrag(e) {
console.log('拖拽中:', e)
},
onDragEnd(e) {
console.log('拖拽结束:', e)
}
```
其中,e参数为拖拽事件的信息,包括拖拽的距离、速度等。
最后在样式中设置`.drag-area`类的相关属性,限制拖拽区域的大小、位置等:
```css
.drag-area {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: #ccc;
}
```
这样就可以实现基本的拖拽效果了。
阅读全文
相关推荐















