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

<view><view><image></image></view></view>

.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);  }

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()   		})     	});    }})