图片拖到小程序实现——以及图片拖不动问题解决

今天老师上课布置了实现图片拖动的功能，大概实验样子如下：

我实现用的不是这个图片，哈哈。其实实现挺简单的，就是把图片的位置设置成鼠标移动的位置。主要代码如下，不懂看解释。

wxml代码

<!--index.wxml-->
    <view >
     <image class='size' src="keai.jpg"  style='left:{{x}}px;top:{{y}}px;'   bindtouchmove='move'></image>
         </view>
     <!--加载移动的图片，其中x,y为图片的位置，注意一定图片样式为绝对的，不然不能移动->
   

js代码

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    x: '120',//图片位置坐标数据
    y: '120',
  },
  move: function (e) {
  
    this.setData({ x: e.touches[0].pageX, y: e.touches[0].pageY })//将鼠标的位置赋给图片位置数据，这样图片就可以移动了
    console.log('我正在移动')
    console.log('pageX: ' + e.touches[0].pageX);//打印图片位置
    console.log('pageY: ' + e.touches[0].pageY);
    //console.log(e)
  }
})

xmss代码

/**index.wxss**/
.size{
  position: absolute;
 width: 70px;
 height: 70px;
} 

自己在做这个过程中，没有遇到错误，但是同学遇到 控制台能打印出数据并且图片位置x,y确实也在改变，但是就是图片拖不动，后面自己研究一下，是因为他没有设置图片的位置，图片位置一定要设置成绝对位置，不然整个视图也会随着变化，所以你会觉得图片没有移动。我实现的效果如下：