移動端觸摸移動相互調換位置

應用場景：在移動端觸摸移動指定容器，與另一個容器相互調換位置。效果如圖：

   

css代碼：

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

.moveItem{
width: 100%;
position: relative;
height: 17%;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.moveItem_box{
width: 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