//这是一个触摸和拖动排序代码，但打包后有时setInterval不起作用 //如果有任何回复，我将不胜感激。
答案 0 :(得分：0)
function drag(preHandler){
var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
var theDivPosition;//元素位置
var mousedownPosition;
var theDiv = null,
move = false; //拖拽对象 拖拽状态
var theDivHeight = 0,
theDivWidth = 0,
tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null,
tarFirst = null; //要插入的目标元素的对象, 临时的虚线对象
var tempDiv = $("<div class='dash'></div>"); //虚线框对象
var scroll;
var roll = false; //避免重复进入持续滚动
var clientYY = 0;//当move事件时改变数值，以便停止计时器
var touch = false;
$('.listItem').bind('touchstart',function(event) {
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
touch = true;
console.log('touchstart');
event.stopPropagation();
theDiv = $(this);
theDivHeight = theDiv.height();
theDivWidth = theDiv.width();
theDivPosition = theDiv.offset().top - $(window).scrollTop();
mousedownPosition = event.originalEvent.targetTouches[0].clientY;
move = true;
theDiv.attr("class", "listItemdash");
theDiv.css({ top: theDivPosition});
lastPos.y = theDivPosition;
tempDiv.insertBefore(theDiv);
$(".listItemdash").css({
"height":theDivHeight,
"width":theDivWidth,
"cursor": "pointer",
"z-index": 99999
});
$(".dash").css("height",theDivHeight);
});
$('.listItem').bind('touchmove', function(event) {
touch = true;
console.log('touchmove');
if (!move) return false;
clientYY = event.originalEvent.targetTouches[0].clientY;
var body_scrillTop = $(window).scrollTop();//方法返回或设置匹配元素的滚动条的垂直位置。
var scrollHeight = $('body').height();//整体内容的高度
var windowHeight = $(window).height(); //窗口高度
function li_move(){
lastPos.y = lastPos.y + (clientYY - mousedownPosition);
lastPos.y1 = theDiv.offset().top + theDivHeight;
// 拖拽元素随鼠标移动
theDiv.css({ top: lastPos.y});
// 拖拽元素随鼠标移动 查找插入目标元素
var $listItem = $('.listItem'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$listItem.each(function() {
tarDiv = $(this);
tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.y1 = tarPos.y;
// console.log(tarPos.y);
tarFirst = $listItem.eq(0); // 获得第一个元素
tarFirstY = tarFirst.offset().top; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (theDiv.offset().top <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (theDiv.offset().top >= tarPos.y - theDivHeight / 2 && lastPos.y1 >= tarPos.y1) {
tempDiv.insertAfter(tarDiv);
}
});
}
li_move();
//下滚
if((event.originalEvent.targetTouches[0].clientY > windowHeight-70) && (body_scrillTop+windowHeight < scrollHeight-30) && !roll){
roll = true;
var touchRollDown = setInterval(function(){
if((body_scrillTop+windowHeight > scrollHeight-30) || (clientYY < windowHeight-70) || move == false){
clearInterval(touchRollDown);
roll = false;
return;
}
body_scrillTop = body_scrillTop + 10;
$(window).scrollTop(body_scrillTop);
li_move();
},100);
}
//上滚
if(event.originalEvent.targetTouches[0].clientY < 70 && (body_scrillTop > 50) && !roll) {
roll = true;
var touchRollUp = setInterval(function(){
// 在滚动条距顶部50px、鼠标不在上方（规定阈值为30以内为上方）、不处于拖动状态时（及mouseup时）停止计时器
if((body_scrillTop < 50) || clientYY > 30 || move == false){
clearInterval(touchRollUp);
roll = false;
return;
}
// 在滚动条移动的同时给移动的元素减小Y值
body_scrillTop = body_scrillTop - 10;
$(window).scrollTop(body_scrillTop);
li_move();
},100);
}
mousedownPosition = event.originalEvent.targetTouches[0].clientY;
});
$('.listItem').bind('touchend',function(event) {
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
theDiv.removeAttr("style");
theDiv.attr("class", "listItem"); //恢复对象的初始样式
theDiv = null; //用完的对象记得释放
tempDiv.remove(); // 删除新建的虚线div
move = false;
touch = false;
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
});
$(".listItem").mousedown(function(event) {
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
//拖拽对象
theDiv = $(this);
theDivHeight = theDiv.height();
theDivWidth = theDiv.width();
// theDivPosition = event.clientY - event.offsetY;
theDivPosition = theDiv.offset().top - $(window).scrollTop();
mousedownPosition = event.clientY;
move = true;
theDiv.attr("class", "listItemdash");
theDiv.css({ top: theDivPosition});
lastPos.y = theDivPosition;
tempDiv.insertBefore(theDiv);
$(".listItemdash").css({
"height":theDivHeight,
"width":theDivWidth,
"cursor": "pointer",
"z-index": 99999
});
$(".dash").css("height",theDivHeight);
});
$(".listItem").mousemove(function(event) {
if (!move) return false;
if(touch) return false;
console.log('mousemove');
var body_scrillTop = $(window).scrollTop();//方法返回或设置匹配元素的滚动条的垂直位置。
var scrollHeight = $('body').height();//整体内容的高度
var windowHeight = $(window).height(); //窗口高度
// console.log(theDiv.offset().top);
clientYY = event.clientY;
function liMove(){
lastPos.y = lastPos.y + (clientYY - mousedownPosition);
lastPos.y1 = theDiv.offset().top + theDivHeight;
// 拖拽元素随鼠标移动
theDiv.css({ top: lastPos.y});
// 拖拽元素随鼠标移动 查找插入目标元素
var $listItem = $('.listItem'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$listItem.each(function() {
tarDiv = $(this);
tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.y1 = tarPos.y;
// console.log(tarPos.y);
tarFirst = $listItem.eq(0); // 获得第一个元素
tarFirstY = tarFirst.offset().top; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (theDiv.offset().top <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (theDiv.offset().top >= tarPos.y - theDivHeight / 2 && lastPos.y1 >= tarPos.y1) {
tempDiv.insertAfter(tarDiv);
}
});
}
liMove();
//下滚——当鼠标在浏览器窗口下方、滚动条没有到达底部、计时器没有在执行时
if(event.clientY > windowHeight-45 && (body_scrillTop+windowHeight < scrollHeight-30) && !roll){
roll = true;
var RollDown = setInterval(function(){
// 在到达底部或鼠标不在底部和不处于拖动状态时停止计时器
if ((body_scrillTop+windowHeight > scrollHeight-30) || (clientYY < windowHeight-45) || move == false){
clearInterval(RollDown);
roll = false;
return;
}
//在滚动条移动的同时给移动的元素增加Y值
body_scrillTop = body_scrillTop + 10;
$(window).scrollTop(body_scrillTop);
liMove();
},100);
}
//上滚——鼠标在浏览器窗口上方、计时器没有执行时
if(event.clientY < 35 && (body_scrillTop > 50) && !roll) {
roll = true;
var RollUp = setInterval(function(){
// 在滚动条距顶部50px、鼠标不在上方（规定阈值为30以内为上方）、不处于拖动状态时（及mouseup时）停止计时器
if((body_scrillTop < 50) || clientYY > 30 || move == false){
clearInterval(RollUp);
roll = false;
return;
}
// 在滚动条移动的同时给移动的元素减小Y值
body_scrillTop = body_scrillTop - 10;
$(window).scrollTop(body_scrillTop);
liMove();
},100);
}
mousedownPosition = event.clientY;
}).mouseup(function(event) {
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
theDiv.removeAttr("style");
theDiv.attr("class", "listItem"); //恢复对象的初始样式
theDiv = null; //用完的对象记得释放
tempDiv.remove(); // 删除新建的虚线div
move = false;
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
});
}