直接上代码:
必须有宽高
<movable-area style="width: {{widthWrap}}px;height: {{heightWrap}}px; pointer-events: none;position: fixed;top:0px;left: 0;">
<movable-view direction="all" x="{{x}}" y="{{y}}" inertia style="pointer-events: auto;position: absolute;top: auto;left: auto;" bindtouchend="touchEnd" bindtouchstart="touchStart" bindchange="move">
<view class="wxqj-box">
..............里面的内容
</view>
</movable-view>
</movable-area>
Page({
data: {
widthWrap: 0,
heightWrap: 0,
x: 0,
y: 0, //设置一开始的位置
xp: 0, //标记每次移动的起始点
yp: 0,
flag: false, //判断是否开始移动
}
onl oad() {
//获取可视宽高度
var w = wx.getSystemInfoSync().windowWidth;
var h = wx.getSystemInfoSync().windowHeight;
// console.log(h);
this.setData({
//这里根据自己情况调节
widthWrap: w - 50,
heightWrap: h - 90,
y: (h - 90) / 2,
})
},
move(e) {
if (this.data.flag) {
this.setData({
x: e.detail.x,
y: e.detail.y,
xp: e.detail.x,
yp: e.detail.y
})
}
},
//开始触摸的时候获取位置坐标
touchStart() {
this.setData({
flag: true,
xp: this.data.x,
yp: this.data.y
})
},
touchEnd() {
this.setData({
flag: false
})
if (this.data.x > this.data.widthWrap / 2) {
this.setData({
x: this.data.widthWrap,
// y: this.data.yp
})
} else {
this.setData({
x: 0,
// y: this.data.yp
})
}
console.log(this.data.yp);
this.setData({
y: this.data.yp
})
},
})