Implémentation de la fonction glisser-déposer d'images dans le développement d'applets WeChat

Cet article partage principalement avec vous l'implémentation de la fonction glisser-déposer d'images dans le développement de l'applet WeChat. Nous rencontrons souvent la fonction glisser-déposer. J'espère que cela pourra aider tout le monde.

1. Écrivez la structure de la page : 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. Écrivez le style de la page : 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.Définissez les données : 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 (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()
	   		})
     	});
    }
})

En raison d'un problème avec le dernier coup, l'effet du dernier coup n'a pas été enregistré. Alors cette fois, j'ai utilisé le pouvoir des temps préhistoriques et j'ai modifié le code.

Recommandations associées :

Comment créer un composant d'aperçu de téléchargement d'image par glisser-déposer dans H5

Méthode JavaScript pour implémenter l'image téléchargement par glisser-déposer

Méthode JavaScript pour obtenir des compétences d'effet de glissement de texte et d'image_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!