元素随手指拖动

                        //开始拖动
                            var cantrans=change=oldtrans=newtrans=0;
                            mui('.attentionDiv').on('dragstart','.contentDiv',function(event){
                                event.stopPropagation();
                                var showwidth=$(this).parent().width();
                                var totalwidth=$(this).width();
                                cantrans=totalwidth-showwidth;
                                //console.log('内容总长度:'+totalwidth+',显示宽度:'+showwidth+',可以移动的距离:'+cantrans);
                                if(cantrans<=0)return false;    
                                var havetrans=$(this).attr('value');
                                oldtrans=havetrans?parseInt(havetrans):oldtrans;
                                $(this).css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')
                            });
                            //拖动中
                            mui('.attentionDiv').on('drag','.contentDiv',function(event){
                                event.stopPropagation();
                                if(cantrans<=0)return false;
                                var fun=$(this).css('transform').substr(19,1);
                                change=event.detail.deltaX;
                                newtrans=oldtrans+change;
                                newtrans=newtrans>=0?0:(Math.abs(newtrans)>=cantrans?-cantrans:newtrans);
                                // console.log('改动前trans'+oldtrans+',改动trans'+change+',改动后trans'+newtrans);
                                $(this).css('transform','translate3d('+newtrans+'px, 0px, 0px) translateZ(0px)')
                            });
                            //拖动结束
                            mui('.attentionDiv').on('dragend','.contentDiv',function(event){
                                if(cantrans<=0)return false;
                                oldtrans=newtrans;
                                $(this).attr('value',oldtrans);
                            });

  

 

 

var startX, startY, moveEndX, moveEndY, X, Y, distanceX, moveX, maxMoveX;
				var flag = true;
				var ulwidth = $(".mui-recommend .house-content ul")[0].scrollWidth*1;
				var widths=$(".mui-recommend .house-content ul").width()*1;
				$(".mui-recommend .house-content ul").on("touchstart", function(e) {
					e.preventDefault();
					startX = e.originalEvent.changedTouches[0].pageX;
					//获取刚开始的位置
					distanceX = $($(".mui-recommend .house-content ul li")[0]).css("marginLeft");
					distanceX = distanceX.split("p")[0];
				});
				$(".mui-recommend .house-content ul").on("touchmove", function(e) {
					e.preventDefault();
					moveEndX = e.originalEvent.changedTouches[0].pageX;
					X = moveEndX - startX;
					moveX = distanceX * 1 + X * 1;
					if (moveX >= 100) {
						moveX = 100;
					}
					maxMoveX = ulwidth - widths;
					if((maxMoveX+100)<=(-moveX)){
						moveX=-maxMoveX;
					}
					if (maxMoveX > 0) {
						$($(".mui-recommend .house-content ul li")[0]).css({
							marginLeft: moveX
						})
					}
					flag = false;
				});
				$(".mui-recommend .house-content ul").on("touchend", function(e) {
					e.preventDefault();
					var _x_end = e.originalEvent.changedTouches[0].pageX;
					_x_end = _x_end - startX;
					moveX = distanceX * 1 + _x_end * 1;
					if (moveX >= 25) {
						moveX = 0;
					}
					if((maxMoveX+100)<=(-moveX)){
						moveX=-maxMoveX;
					}
					if (!flag) {
						if (maxMoveX > 0) {
							$($(".mui-recommend .house-content ul li")[0]).css({
								marginLeft: moveX
							})
						}
					}
					flag = true;
					//return false;
				});

  

最上面的是mui 的拖动,下面的是引入JQUERY的跟随手指移动,但是最好是换上transform,而不是marginLeft

posted @ 2019-05-15 18:13  红尘紫陌  阅读(376)  评论(0)    收藏  举报