微信小程序实验图片拖拽和限制移出屏幕

 

wxml文件

<view class="view" style="left:{ {left}}px;top:{ {top}}px;" bindtouchmove="viewTouchMove">
 <image class='img' src='/imgs/c.png'></image>
 </view>

 

wxcc文件

.img{
  width: 120px;
  height:120px;
}
.view{
 position: absolute;
}

 

js文件

//获取应用实例

const app = getApp()

 

Page({

//初始化位移

data: {

left: 0,

top: 0,

},

 

viewTouchMove: function(e) {

//显示触点的位移x,y,即left与top

console.log("e.touches[0].clientX = " + e.touches[0].clientX)

console.log("e.touches[0].clientY = " + e.touches[0].clientY)

 

//注意：鼠标触点 = 图片左上角

/* 为了视觉可调整

this.setData({