var drag = {

bindDragEvent: function (isF) {

var father = document.getElementById("public_theme_list");//父容器

var btns = father.getElementsByClassName("public-drag-btn");//事件源對(duì)象

var items = father.getElementsByClassName("item");//拖拽目標(biāo)

for (var i = 0; i < items.length; i++) {

items[i].index = i;//給拖拽目標(biāo)加index屬性

if (isF) {//是否是第一次綁定

drag.bindTouchEvent(btns[i], items[i], items);

}else{

if (items[i].getAttribute("data-isBind") == "yes") {//如果是需要綁定的再綁定事件

items[i].removeAttribute("data-isBind");

drag.bindTouchEvent(btns[i], items[i], items);

}

}

}

/*

* 1.循環(huán)綁定事件

* 2.用分支綁定是為了避免重復(fù)綁定事件 造成重復(fù)調(diào)用的BUG

* */

},

bindTouchEvent: function (ele, target, items) {

var dragObj = target;//拖拽目標(biāo)

var btn = ele;//事件源對(duì)象

var canMove = true;

var startY, direction;

btn.addEventListener("touchstart", touchStart, false);

function touchStart(event) {

dragObj.className = "item draging";

/*

* .draging

* 當(dāng)手指觸摸時(shí)給個(gè) 拖拽中的效果

* transform:scale(0.8,0.8);

* z-index: 999;

* transition: all 1s;

* */

startY = event.touches[0].clientY;//記錄初次觸摸位置 用以判斷移動(dòng)方向

dragObj.addEventListener("touchmove", touchMove, false);//給拖拽目標(biāo)綁定touchmove 因?yàn)橐僮魍献繕?biāo)

}

function touchMove(event) {

var i = dragObj.index;//用到index

if (event.touches[0].clientY < startY && canMove) {

/*移動(dòng)

*canMove是在完成效果后禁止再向下移動(dòng)

* 也就是說(shuō)用戶(hù)移動(dòng)一次就確定方向了 禁止先 拖到上方，在拖到下方

* */

if (i != 0) {//如果不是第一個(gè)項(xiàng)

direction = 1;//有效1 up

dragObj.className = "item draging up";

/*

* .up

* transform: translate3d(20px,-100%,10px)

* 給一個(gè)自身向上移動(dòng)百分百

* */

items[i - 1].className = "item draging down";

/*當(dāng)前被拖拽目標(biāo)的上一個(gè)項(xiàng) 給一個(gè)向下移動(dòng)的動(dòng)效

* .down

* transform: translate3d(20px,100%,10px)

* */

canMove = false;

}

}

else if (event.touches[0].clientY > startY && canMove) {

direction = 0;//向下移動(dòng)

dragObj.className = "item draging down";

items[i + 1].className = "item draging up";

canMove = false;

}

dragObj.addEventListener("touchend", touchEnd, false);

}

function touchEnd() {

var father = document.getElementById("public_theme_list");

var clone = null;//克隆空對(duì)象

var i = dragObj.index;

var newItems;

dragObj.className = "item";//清除拖拽目標(biāo)移動(dòng)效果

clone = dragObj.cloneNode(true);//克隆移動(dòng)目標(biāo)

if (direction) {

//向上

items[i - 1].className = "item";//當(dāng)前被拖拽目標(biāo)的上一個(gè)項(xiàng) 給一個(gè)向下移動(dòng)的動(dòng)效

clone.index = i - 1;//給克隆對(duì)象index 為當(dāng)前上一個(gè)項(xiàng)index

items[i - 1].index = i + 1;//拖拽對(duì)象前上一個(gè)項(xiàng)index+1

clone.setAttribute("data-isBind","yes");//dom 不能克隆事件 所以在遞歸的時(shí)候要給克隆綁定事件

father.insertBefore(clone,items[i - 1]);

/*將克隆對(duì)象插入當(dāng)前拖拽目標(biāo) 前一項(xiàng)之前*/

newItems = father.getElementsByClassName("item");

/*因?yàn)樾略隽隧?xiàng) 所以獲取新項(xiàng)數(shù)組*/

father.removeChild(newItems[i + 1]);

/*刪除當(dāng)前拖拽項(xiàng)*/

}

else {

items[i + 1].className = "item";

clone.index = i + 1;

clone.setAttribute("data-index", i + 1);

items[i + 1].index = i;

items[i + 1].setAttribute("data-index", i);

clone.setAttribute("data-isBind","yes");

father.insertBefore(clone, items[i + 2]);

newItems = father.getElementsByClassName("item");

father.removeChild(newItems[i]);

}

drag.bindDragEvent(false);//遞歸調(diào)用

}

}

};

drag.bindDragEvent(true);

其實(shí)應(yīng)該還有一段AJAX代碼，是將排序后的順序index ?POST給服務(wù)器記錄下來(lái)，用戶(hù)再次進(jìn)入之后會(huì)根據(jù)token區(qū)分用戶(hù)，顯示不同的順序。

一開(kāi)始沒(méi)有思路，其實(shí)最怕寫(xiě)的就是多媒體和觸摸拖拽相關(guān)的代碼了。

但是沒(méi)辦法，項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)啊~

自己死笨死笨的。。。這點(diǎn)代碼從想思路，到寫(xiě)，到試錯(cuò)，整整6個(gè)小時(shí)。。。笨死我算了

不過(guò)學(xué)習(xí)了很多東西，沒(méi)有用h5拖拽，是因?yàn)榭紤]兼容問(wèn)題，主要是在webView 里跑，js還靠譜些..

笨死算逑！！！

總結(jié)

以上是生活随笔為你收集整理的移动端拖拽排序 html,移动端拖拽排序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。