元素拖动，相对固定：
<movable-area>
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
<script>
data() {
return {
x: 0,
y: 0
}
},
methods: {
onChange: function(e) {
this.old.x = e.detail.x
this.old.y = e.detail.y
}
}
}
</script>
元素支持拖动，且拖动结束后为固定定位：
<view class="">
<image :style="{position:fixedPosition,top:fixedTop,left:fixedLeft,width:'80rpx'}"
:src="图片路径" mode="widthFix"
@touchstart="fixedPosition='absolute'" @touchmove="homeMove" @touchend="fixedPosition='fixed'">
</image>
</view>
<script>
data() {
return {
fixedPosition: 'fixed',
fixedLeft: '20%',
fixedTop: '20%'
}
},
methods: {
homeMove(e) {
let info = uni.getSystemInfoSync();
// 超出设为0
let left=e.changedTouches[0].clientX
let top=e.changedTouches[0].clientY
this.fixedLeft =(left < 0 ? 0 : (left >=info.windowWidth ? info.windowWidth : left )) + 'px';
this.fixedTop = (top < 0 ? 0 : (top >= info.windowHeight? info.windowHeight : top)) + 'px'
}
}
}
</script>
