微信小程序实现图片的拖拽移动

一：实验前准备

本文将手把手教你制作如何拖动图片，以及增加限制防止拖出界面外，以及在界面中输出图片的先后位置。

1.先在微信小程序初始界面创建一个JS基础模板

2.创建好后将index文件夹里的文件逐个清空

3.将实验所需要的图片导入（文件夹images可建可不建）

二：编写代码

1. index.wxml

<image src="/images/PaperPlane.png"
style="width: {{width}}px; height: {{height}}px; left: {{left}}px; top: {{top}}px;position: absolute;" bind:touchmove= "BindTM"></image>
<!--注释：不需要输出坐标文本可将下面删除-->
<text style="width: 100px; height: 220px; font-size: 10px;">{{text}}</text>

<image>标签，src中写的是图片的路径，按自身情况更改。

style中的双括号的width，height，left，top属性为变量，可在js文件中更改，后面px则是像素单位，必须要带有的。否则会不起作用，而且还不会报错。

当然，要想更改图片到想要的位置，还要设置为绝对坐标，这样left，top的控制才会起作用。

最后有个最重要的，bind:touchmove事件，一旦有触摸移动事件，将触发BindTM方法。

<text>标签则是在界面上输出坐标文本的，style中设置了宽高和字体大小，可酌情更改。

2. index.js

Page({
  data: {
    width:100,  //图片的宽度
    height:100,   //图片的高度
    left:50,    //相当于坐标轴x
    top:50,     //相当于坐标轴y

    //不需要输出坐标文本可将下面变量删除
    text:"",  //界面要展示的文本
    i:0,  //计数器
    max:15,  //最大展示坐标个数
    pos:[""]  //字符串数组
  },

  BindTM:function(e)
  {
    var le = e.touches[0].clientX - this.data.width/2 //定义临时变量存储left
    var to = e.touches[0].clientY - this.data.height/2 //定义临时变量存储top
    if(le > 0 && le < 230) //控制出界限制
    {
        this.setData({left : le}) //赋值
    }
    if(to > 0 && to < 400) //控制出界限制
    {
        this.setData({top : to})    //赋值
    }

    //坐标文本逻辑（不需要可将下面删除）
    if(this.data.i > this.data.max)  //达到最大展示数
    {
        this.setData({text : ""})   //赋值
        this.data.pos.shift()  //从头排出一位
    }
    this.data.pos.push(this.data.left.toFixed(2) + ',' + this.data.top.toFixed(2)) //从尾插进一位
    this.data.i = this.data.i+1 //计数器加
    var t = ""  //临时存储数组拼接的字符串
    this.data.pos.forEach(item => {
        t = t + item + '\n'
    })  //拼接整个数组
    this.setData({text : t}) //将拼接的字符串赋值给text
  }
})

le 为何等于 e.touches[0].clientX - this.data.width/2 ？

e.touches[0].clientX是获取的鼠标x坐标值，但是因为图片的锚点在左上角，而不再中心点，所以直接赋x值的话图片只会移动到你鼠标的右下角，而不是中心位置。所以需要减去图片的宽度的一半，才能达成效果，Y坐标同理。

下面的出界则是根据图片位置是否超出界面的大小来决定是否把坐标赋值给图片。

当然，目前代码有一定的缺陷，不能根据界面的大小来变化控制区域，此事交予读者后续补足了。

对于坐标文本输出逻辑，我使用了几种方法来实现，结果都不尽人意，都会极大的损耗性能从而造成卡顿，文章中的这一种是权衡利弊的结果。

将图片的每个坐标存储到一个数组里，再拼接成字符串输出到组件text，这里每更新一次数据text组件均会刷新，有一定的压力，所以控制数组最大为15+1。

数组的逻辑为每次存储一对坐标，达到最大数量时将头部一对坐标排出，然后从尾部进入一对新的坐标。

三：实现结果

四：结语

此代码仅仅只是一个拖拽图片移动的示例，对于其中的输出坐标文本有很大的优化空间，我相信优秀的读者们可以做到更好！

此文章源码下载地址：【免费】微信小程序拖动图片源码资源-优快云文库