移动端触摸移动相互调换位置

应用场景：在移动端触摸移动指定容器，与另外一个容器相互调换位置。效果如图：

   

css代码：

*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
html,body{
100%;
height: 100%;
position: relative;
background: rgb(70,70,70);
}
.pageContent{
100%;
height: 100%;
}

.moveItem{
100%;
position: relative;
height: 17%;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.moveItem_box{
90%;
height: 100%;
margin: 0 auto;
text-align: center;
background: #1866a4;
color: #FFFFFF;
font-size: 2rem;
}

body体代码：

<div class="pageContent">
<div class="moveItem">
<div class="moveItem_box">1</div>
</div>
<div class="moveItem">
<div class="moveItem_box">2</div>
</div>
<div class="moveItem">
<div class="moveItem_box">3</div>
</div>
<div class="moveItem">
<div class="moveItem_box">4</div>
</div>
</div>

js代码：

var moveList;//放置移动div的数组
var _this;//当前选择移动的容器
var chooseItemX,chooseItemY;//当前选择容器的位置
var startX,startY;//当前点击的位置
var endX,endY;//移动结束点的位置
var distanceX,distanceY,chooseItemY2;//移动的距离
var endTop;//移动之后当前容器的位置
var itemHeight;//每一个容器的高度
var lastItemOffsetTop;//最后一项距离页面顶部的高度，用于往下移动的时候不超初父div的范围
var firstItemOffsetTop;//第一项距离页面顶部的高度，用于往上移动的时候不超初父div的范围
var num,count;//当前所选容器将要置换到哪个目的容器,经过多少个容器
var index;//当前选中容器的下标
var limit;//不能超出底线
var offsetTop;//移动结束点该容器距离顶部的距离

$(function(){
addEvent();
})

//获取所有移动项，并且添加触摸事件
function addEvent(){
moveList = $(".moveItem");
for(var i=0;i<moveList.length;i++){
moveList[i].addEventListener("touchstart", dragStart);
moveList[i].addEventListener("touchmove", dragMove);
moveList[i].addEventListener("touchend", dragEnd);
$(moveList[i]).attr("name",i);
}
itemHeight = $(moveList[0]).height();
var length = moveList.length;
lastItemOffsetTop = $(moveList[length-1]).offset().top;
firstItemOffsetTop = $(moveList[0]).offset().top;
}

function dragStart(e){
_this = $(this);
index = _this.attr("name");
chooseItemX = parseInt(_this.css("left") + 0);//选中移动div的原本位置
chooseItemY = parseInt(_this.css("top") + 0);
chooseItemY2 = parseInt(_this.offset().top + 0);
startX = e.changedTouches[0].pageX;//当前开始触摸点的位置
startY = e.changedTouches[0].pageY;
}

function dragMove(e){
//获取滑动屏幕时的X,Y
endX = e.changedTouches[0].pageX,
endY = e.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
if(distanceY < 0) { //往上滑动
console.log("往上滑动");

endTop = chooseItemY+endY-startY;
count = Math.round(Math.abs(endTop / itemHeight));//经过多少个
limit = parseInt(index)-parseInt(count);
offsetTop = (offsetTop==true ? firstItemOffsetTop : _this.offset().top) ;
if(index!=0 && limit>=0 && offsetTop>=firstItemOffsetTop){//往上滑动的时候不超出范围
endTop = chooseItemY+endY-startY;
_this.css({top:endTop+'px'});
}

} else if(distanceY > 0) {
console.log("往下滑动");
endTop = chooseItemY + endY - startY;
endTop = endTop < 0 ? 0 : endTop;
count = Math.round(Math.abs(endTop / itemHeight));//经过多少个
limit = parseInt(count)+parseInt(index);
offsetTop = _this.offset().top;
if(index<moveList.length-1 && limit<moveList.length && offsetTop<=lastItemOffsetTop){
_this.css({top:endTop+'px'});
}
}
}

function dragEnd(e){
if(distanceY < 0) { //往上滑动
console.log("往上滑动");
if(Math.abs(endTop)<=itemHeight/2){
num = parseInt(index);//置换的另一个dom
}else{
count = Math.round(Math.abs(endTop / itemHeight));//经过多少个
num = parseInt(index)-count;//置换的另一个dom
}
if(num<0){
num=0;
}
if(num>=0 && num!=index){
_this.css({
"top": 0 + 'px',
});
var changeItem_origin = $(moveList[index]).context.outerHTML;
var changeItem = $(moveList[num]).context.outerHTML;
_this.context.outerHTML = changeItem;
$(moveList[num]).context.outerHTML = changeItem_origin;
addEvent();
}
if(num==index){
_this.css({
"top": 0 + 'px',
});
}

} else if( distanceY > 0) {
console.log("往下滑动");
if(Math.abs(endTop)<=itemHeight/2){
num = parseInt(index);//置换的另一个dom
}else{
count = Math.round(Math.abs(endTop / itemHeight));//经过多少个
num = parseInt(index)+count;//置换的另一个dom
}

if(num>=moveList.length){//移动到最后的位置
num = moveList.length-1;
}

if(num>0 && num<moveList.length && num!=index){
_this.css({
"top": 0 + 'px',
});
var changeItem_origin = $(moveList[index]).context.outerHTML;
var changeItem = $(moveList[num]).context.outerHTML;
_this.context.outerHTML = changeItem;
$(moveList[num]).context.outerHTML = changeItem_origin;
addEvent();
}

if(num==index){//移动一点点，回到原本的位置
_this.css({
"top": 0 + 'px',
});
}


}
}

具体项目可以下载进行参考：

链接：https://pan.baidu.com/s/1qL3sssLECge6QV2Vx0XHew
提取码：9726