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

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

1.编写页面结构:moveimg.wxml<view>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.jsvar 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;//设置图片固定宽度值，varviewHeight=parseInt(viewWidth/ratio);//计算的高度值if (viewHeight< cnt_offeth) {viewHeight=cnt_offeth;}_this.setData({imgwidth:viewWidth,imgheight:viewHeight,cnt_boxw:cnt_offetw,cnt_boxh:cnt_offeth,})},startEvent:function(e){//1.获取鼠标点击下去的this.setData({startx: e.touches[0].pageX,starty: e.touches[0].pageY})},moveEvent: function(e) { var _this=this;//2.鼠标移动的位置var pageX = e.touches[0].pageX;var pageY = e.touches[0].pageY;var x,y;//3.记住初始化图片x,yvar endx=_this.data.x,endy=_this.data.y;//4.判断var w_x=_this.data.imgwidth-_this.data.cnt_boxw;//x拖拽值：图片宽-框的宽var h_y=parseInt(_this.data.imgheight-_this.data.cnt_boxh);//y拖拽值：图片高-框高var DistanceX = pageX - _this.data.startx;//x:当鼠标点击到移动的点之间的距离var DistanceY =pageY - _this.data.starty;//y:当鼠标点击到移动的点之间的距离if (DistanceX>0){//往右移动 如果当前的值大于等于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技巧以上就是微信小程序开发之图片拖拽功能的实现的详细内容，更多请关注小潘博客其它相关文章！