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

浙公网安备 33010602011771号