直接上代码:
必须有宽高 <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 }) }, })