移動端觸控移動相互調換位置
應用場景：在移動端觸控移動指定容器，與另外一個容器相互調換位置。效果如圖：
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