元素随手指拖动
//开始拖动 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