微信小程序拖拽实现（真实测试管用）

//js
// 是否拖拽的标记
var isClick = false;
// 初始化起点
var StartX,StartY;
// 拖拽结束的终点
var EndX,EndY;
      // 限定拖拽距离
      var  YMin=253,YMax=634,XMin=264,XMax=0;
Page({
    data: {
        //top值
        top:508,
        //left值
       // left:0,
        //使用right 请切换right的代码
        right:0
    },
    //   移动开始
  moveStart:function(e){
  //刚开始触摸的点，当前触摸的点-当前元素的距离值
  //   right
  StartX= e.touches[0].clientX+this.data.right;
  //  left
  // StartX= e.touches[0].clientX-this.data.left;
  //top
  StartY = e.touches[0].clientY-this.data.top;
  //  触摸标记
  isClick = true;
  },
//   移动结束
  moveEnd:function(){
      //  触摸标记
    isClick = false;
  },
//   移动中
  moving:function(e){
  //   left
    // EndX = e.changedTouches[0].clientX-StartX;
    // right
    EndX = -(e.changedTouches[0].clientX-StartX);
    //top
    EndY = e.changedTouches[0].clientY-StartY;
        // 当前距离小于最小值,则等于最小值否则进行判断最大距离限定大于最大距离就等于最大距离
        //(X轴反判断是因为他是负值，使用了right)
    // left
    // let X=EndX<=XMin?XMin:(EndX>XMax?XMax:EndX);
    // right
    let X=EndX<=XMax?XMax:(EndX>XMin?XMin:EndX);
    // top
    let Y=EndY<=YMin?YMin:(EndY>YMax?YMax:EndY);
   if(isClick){
   //给元素赋值
        this.setData({
            top: Y,
            // left:X,
            right:X
        })
    }
  },
})

//wxss
//父元素必须为相对定位或者固定定位才可以
view{
  position: absolute;
  width: 100rpx;
  height: 100rpx;
}

//wxml
   <view style="top:{{top}}px;left:{{left}}px" 
    bindtouchmove='moving' 
    bindtouchstart='moveStart'
     bindtouchend='moveEnd'>
    </view>