이 기사에서는 WeChat 애플릿 개발 시 이미지 드래그 앤 드롭 기능 구현을 주로 공유합니다. 드래그 앤 드롭 기능이 모든 사람에게 도움이 되기를 바랍니다.
1. 쓰기 페이지 구조: moveimg.wxml
<view class="container" style="height:{{screenHeight}}px;" > <view class="cnt"> <image class="image-style" src="../uploads/2.jpg" style="width: {{imgwidth}}px;height:{{imgheight}}px;"bindtouchstart="startEvent" bindtouchmove="moveEvent"bindload="imageLoad"animation=" {{animationData}}"bindtouchend="endEvent"> </image> </view> </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.설정 데이터: mo ve img.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 (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,y var 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 메서드
텍스트 및 이미지 드래그 앤 드롭 effect_javascript 기술을 구현하는 JavaScript 메서드
위 내용은 WeChat 애플릿 개발 시 이미지 드래그 앤 드롭 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!