//This is a touch and drag sorting code, but setInterval sometimes doesn't work after packaging //I would be grateful if there is a reply.
Asked
Active
Viewed 42 times
1 Answers
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"
});
});
}
-
What's going on here? if this code is supposed to represent the problem in the question it belongs in the question not in an answer. If this is supposed to answer the problem in the question it is a wall of code with no explanation – charlietfl Nov 20 '18 at 02:35
-
Sorry, maybe I didn’t express it clearly.Excuse me, setInterval is not executed during touchmove. – user10677681 Nov 20 '18 at 03:54
-
Fine but you are going about this all wrong. All the details belong inside the question. You can [edit](https://stackoverflow.com/posts/53385352/edit) your question any time to include updates and clarifications. You created an answer and put your code in it but it isn't a solution it is the problem code – charlietfl Nov 20 '18 at 03:56