移动端上下拖动调整顺序效果_jquery、css实现移动端元素拖动排序

注：本文原创，转载请注明出处

1.近期需要实现一个选项进行拖动排序的页面，页面如下:

2.JSP页面代码：

支XX代扣

微XX代扣

XXX银行代扣

AAA银行代扣

CCC银行代扣

SSS银行代扣

3.css样式代码

body {

background-color: #ffffff;

padding: 0;

margin: 0;

}

.main{

width: 100%;

height: 100%;

box-sizing: border-box;

padding: 0px;

}

.drag-div{

width: 100%;

height:100%;

overflow:auto;

position: absolute;

}

.others{

width: 100%;

height: auto;

background-color: #ddd000;

position: relative;

}

.drag-div-elem{

border-left: 1px solid #dddddd;

border-right: 1px solid #dddddd;

border-bottom:1px solid #dddddd;

border-top: 1px solid #dddddd;

width: 100%;

height: 50px;

background-color: #ffffff;

position: absolute;

}

.drag-first-elem{

border-top: 1px solid #dddddd;

}

.payway-info{

width: 80%;

height: 100%;

float: left;

padding-left: 15px;

text-align: left;

line-height: 50px;

font-size: 20px;

}

.drag-elem-btn{

width: 20%;

max-width:60px;

height: 48px;

float: right;

padding: 10px;

border: 0px;

}

.drag-elem-btn-icon{

width: 100%;

height: 100%;

border-left: 0px;

border-right: 0px;

border-top: 4px solid #dddddd;

border-bottom:4px solid #dddddd;

padding-bottom: 8px;

padding-top: 8px;

background-clip:content-box;

background-color:  #dddddd;

}

.show-top{

z-index: 20;

filter:alpha(Opacity=70);

-moz-opacity:0.7;

opacity: 0.7;

box-shadow:#000 0px 5px 6px 3px ;

}

.drag-inset-div{

background-color: #dddddd;

}

4.js代码

/**

*

*/

var isdrag = true;  //是否移动

var topHeight = $(".others").css("height");  //头部div的高度

var topHeightInt = 0;

var elementHeight = $(".drag-div-elem").css("height");  //每一个移动元素DIV的高度

var elementHeightInt = 0;

var halfElementHeightInt = 0;

var startEleCssTopInt;//元素div的起始时的top值

var lastTouchTempY = null;//上一次滑动时元素触摸点坐标

var startTouchY; //起始时的触摸点坐标

var choseEleNum = null; //选择的是第几个元素

var eleMoveDistance = 0;   //选择元素相对于其他元素的距离

var isNeedMoveEle = true;   //其他元素是否需要移动

var theMaxNumberAttr = null; //元素最大的number值

var theMinNumberAttr = null; //元素最小的number值

var theMaxMoveScope = null;  //可以移动的最大范围  ，最小范围为topHeightInt；

//开始移动

function dragStart(e) {

isdrag = true;

e.preventDefault();

startTouchY = e.originalEvent.targetTouches[0].pageY;

var obj = $(e.target);

var paywayEleObj = obj.parents(".drag-div-elem");

choseEleNum = $(paywayEleObj).attr("number");

var startTouchCssTop = $(paywayEleObj).css("top");

if (undefined == startTouchCssTop || null == startTouchCssTop

|| "auto" == startTouchCssTop) {

startEleCssTopInt = topHeightInt;

} else {

startEleCssTopInt = parseInt(startTouchCssTop.substring(0,

startTouchCssTop.length - 2));

}

$(paywayEleObj).addClass("show-top");

}

function dragMove(e) {

var direction = "up";

e.preventDefault();

//获取移动的距离

var moveTouchY = e.originalEvent.targetTouches[0].pageY; //获取第一个触点

console.log("moveTouchY==="+moveTouchY);

console.log("lastTouchTempY==="+lastTouchTempY);

if (isdrag) {

var obj = $(e.target);

var paywayEleObj = obj.parents(".drag-div-elem");

//判断是不是在可移动的范围内

if(moveTouchY < topHeightInt || moveTouchY > theMaxMoveScope){

return;

}

//此次滑动的距离

var distance = moveTouchY - startTouchY;

eleMoveDistance = eleMoveDistance + Math.abs((moveTouchY - (null == lastTouchTempY?startTouchY:lastTouchTempY)));

if(null == lastTouchTempY){

//向上滑动

if(startTouchY > moveTouchY){

direction = "up";

}else{

direction = "down";

}

}else{

//向上滑动

if(lastTouchTempY > moveTouchY){

direction = "up";

}else{

direction = "down";

}

}

var newCssTop = startEleCssTopInt + distance;

if(newCssTop<0){

return;

}

$(paywayEleObj).css({"top":newCssTop+"px"});

console.log("eleMoveDistance==="+eleMoveDistance);

//向上移动

if("down" == direction && parseInt(theMaxNumberAttr) > parseInt(choseEleNum)){

if(isNeedMoveEle && eleMoveDistance < elementHeightInt && eleMoveDistance >= halfElementHeightInt){

isNeedMoveEle = false;

var autoUpEleNum = parseInt(choseEleNum) + 1;

var autoUpEleCssTop = $(".drag-div-elem[number='"+autoUpEleNum+"']").css("top");

var autoUpEleCssTopInt = parseInt(autoUpEleCssTop.substring(0,autoUpEleCssTop.length-2));

var autoUpEleNewTop = autoUpEleCssTopInt - (elementHeightInt + 1);

$(".drag-div-elem[number='"+autoUpEleNum+"']").css({"top":autoUpEleNewTop+"px"});

//换number

$(".drag-div-elem[number='"+autoUpEleNum+"']").attr("number",choseEleNum);

$(paywayEleObj).attr("number",autoUpEleNum);

choseEleNum = autoUpEleNum;

}else if(eleMoveDistance >= elementHeightInt){

eleMoveDistance = 0;

isNeedMoveEle = true;

}

}

//向下移动

if("up" == direction && parseInt(theMinNumberAttr) < parseInt(choseEleNum)){

if(isNeedMoveEle && eleMoveDistance < elementHeightInt && eleMoveDistance >= halfElementHeightInt){

isNeedMoveEle = false;

var autoUpEleNum = parseInt(choseEleNum) - 1;

var autoUpEleCssTop = $(".drag-div-elem[number='"+autoUpEleNum+"']").css("top");

var autoUpEleCssTopInt = parseInt(autoUpEleCssTop.substring(0,autoUpEleCssTop.length-2));

var autoUpEleNewTop = autoUpEleCssTopInt + (elementHeightInt + 1);

$(".drag-div-elem[number='"+autoUpEleNum+"']").css({"top":autoUpEleNewTop+"px"});

//换number

$(".drag-div-elem[number='"+autoUpEleNum+"']").attr("number",choseEleNum);

$(paywayEleObj).attr("number",autoUpEleNum);

choseEleNum = autoUpEleNum;

}else if(eleMoveDistance >= elementHeightInt){

eleMoveDistance = 0;

isNeedMoveEle = true;

}

}

lastTouchTempY = moveTouchY;

}

}

function dragEnd(e) {

e.preventDefault();

isdrag = false;

lastTouchTempY = null;

var obj = $(e.target);

var paywayEleObj = obj.parents(".drag-div-elem");

$(paywayEleObj).removeClass("show-top");

//修正移动的元素的top

var number = $(paywayEleObj).attr("number");

var top = 0 + ( elementHeightInt + 1 ) * (parseInt(number)-1);

$(paywayEleObj).css({"top":(top+topHeightInt)+"px"});

}

$(function(){

topHeightInt = parseInt(topHeight.substring(0, topHeight.length - 2));

elementHeightInt = parseInt(elementHeight.substring(0,elementHeight.length-2));

halfElementHeightInt = parseInt(elementHeightInt+2) / 2;

var elementDivArr = $(".drag-div").find(".drag-div-elem");

theMinNumberAttr = $(elementDivArr[0]).attr("number");

for(var i=0;i

var eleObj = elementDivArr[i];

var number = $(eleObj).attr("number");

theMaxNumberAttr = number;

var top = 0 + ( elementHeightInt + 1 ) * (parseInt(number)-1);

$(eleObj).css({"top":(top+topHeightInt)+"px"});

}

theMaxMoveScope = topHeightInt + number * ( elementHeightInt + 1 );

$(".drag-inset-div").css("height",(number * ( elementHeightInt + 1 ) + 1) +"px");

$(".drag-elem-btn").on("touchstart", dragStart);

$(".drag-elem-btn").on("touchmove", dragMove);

$(".drag-elem-btn").on("touchend", dragEnd);

});