微信小程序开发之图片拖拽功能的实现

本文主要和大家分享微信小程序开发之图片拖拽功能的实现，拖拽功能我们会经常遇到，希望能帮助到大家。

1.编写页面结构:moveimg.wxml

2.编写页面样式：moveimg.wxss

.container {
    box-sizing:border-box;
    padding:1rem;
} 
.cnt{
    width:100%;
    height:70%;
    border: 1px solid #ccc;
    position:relative;
    overflow: hidden;
    z-index:9999;
}
.image-style{
 -webkit-transform:translate(-38px,0px);  
}

3.设置数据:moveimg.js

var app = getApp()
Page({
 data: {
     imgwidth:0,
     imgheight:0,
     animationData: {},
     movex:0,
     movey:0,
     x:0,
     y:0,
 },
 onLoad: function() {
   // 页面初始化 options为页面跳转所带来的参数
  var _this = this;
  wx.getSystemInfo({
   success: function(res) {
    _this.setData({
     screenHeight: res.windowHeight,
     screenWidth: res.windowWidth,
    });
   }
  });
 },
 onReady:function(){
     // 页面渲染完成
     //实例化一个动画
     this.animation = wx.createAnimation({
      duration: 1000, 
      timingFunction: 'linear',//均匀
      transformOrigin: "left top 0px",
     })
 },
 imageLoad: function(e) {  
        var _this=this; 
        //1.框的宽高
        var cnt_offetw=_this.data.screenWidth-38,
         cnt_offeth=(_this.data.screenHeight-38)*0.7;
        //2.获取图片真实宽度
        var $width=e.detail.width,    //获取图片真实宽度  
            $height=e.detail.height,  
            ratio=$width/$height;   //图片的真实宽高比例
        //3.进行判断:当图片小于框时候，图片大小等于框大小，当大于框的时候，则成比例呈现
        var viewWidth=_this.data.screenWidth;           //设置图片固定宽度值，  
        var viewHeight=parseInt(viewWidth/ratio);    //计算的高度值
      if (viewHeight0){
   //往右移动 如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离
   if (endx >= 0) {
          x = 0;
      } else {
          x = endx + DistanceX;
      }
     }else{
      //往左移动:x拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离
   if (w_x >= endx) {
          x = -w_x;
      } else {
          x = endx + DistanceX;
      }
     }
     if (DistanceY>0){
      //往下移动:如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离
   if(endy>=0){
    y =0;
      }else{
          y = endy + DistanceY;
      }
     }else{
      //往上移动:y拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离
      if(-endy==h_y||-endy>h_y){
       y=-h_y;
       console.log("da0")
      }else{
       y=endy+DistanceY;
       console.log("da 1")
      }
   }
     setTimeout(function() {
        _this.animation.translate(x, y).step();
   _this.setData({
          animationData: this.animation.export()
      })
     }.bind(this), 0)

     _this.setData({
      x:x,
      y:y,
     }) 
     endx=x;endy=y;//记住这次的图片移动的范围
     _this.data.startx=pageX;_this.data.starty=pageY;// 每移动一次把上一次的点作为原点
    },
    endEvent:function(){
   clearTimeout(function(){
      this.animation.translate(this.data.x,this.data.y).step();
   this.setData({
          animationData: this.animation.export()
      })
      });
    }
})

由于上次做的这个有问题，并没有记录上一次移动的效果。所以这次我使用了洪荒之力，修改下代码。

相关推荐：

H5怎样做出图片拖拽上传预览组件

JavaScript实现图片拖拽上传的方法

JavaScript实现文字与图片拖拽效果的方法_javascript技巧

以上就是微信小程序开发之图片拖拽功能的实现的详细内容，更多请关注慧达安全导航其它相关文章！