var drag = {

bindDragEvent: function (isF) {

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

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

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

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

items[i].index = i;//給拖拽目標加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.循環綁定事件

* 2.用分支綁定是為了避免重復綁定事件 造成重復調用的BUG

* */

},

bindTouchEvent: function (ele, target, items) {

var dragObj = target;//拖拽目標

var btn = ele;//事件源對象

var canMove = true;

var startY, direction;

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

function touchStart(event) {

dragObj.className = "item draging";

/*

* .draging

* 當手指觸摸時給個 拖拽中的效果

* transform:scale(0.8,0.8);

* z-index: 999;

* transition: all 1s;

* */

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

dragObj.addEventListener("touchmove", touchMove, false);//給拖拽目標綁定touchmove 因為要操作拖拽目標

}

function touchMove(event) {

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

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

/*移動

*canMove是在完成效果后禁止再向下移動

* 也就是說用戶移動一次就確定方向了 禁止先 拖到上方，在拖到下方

* */

if (i != 0) {//如果不是第一個項

direction = 1;//有效1 up

dragObj.className = "item draging up";

/*

* .up

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

* 給一個自身向上移動百分百

* */

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

/*當前被拖拽目標的上一個項 給一個向下移動的動效

* .down

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

* */

canMove = false;

}

}

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

direction = 0;//向下移動

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;//克隆空對象

var i = dragObj.index;

var newItems;

dragObj.className = "item";//清除拖拽目標移動效果

clone = dragObj.cloneNode(true);//克隆移動目標

if (direction) {

//向上

items[i - 1].className = "item";//當前被拖拽目標的上一個項 給一個向下移動的動效

clone.index = i - 1;//給克隆對象index 為當前上一個項index

items[i - 1].index = i + 1;//拖拽對象前上一個項index+1

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

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

/*將克隆對象插入當前拖拽目標 前一項之前*/

newItems = father.getElementsByClassName("item");

/*因為新增了項 所以獲取新項數組*/

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

/*刪除當前拖拽項*/

}

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);//遞歸調用

}

}

};

drag.bindDragEvent(true);

其實應該還有一段AJAX代碼，是將排序后的順序index ?POST給服務器記錄下來，用戶再次進入之后會根據token區分用戶，顯示不同的順序。

一開始沒有思路，其實最怕寫的就是多媒體和觸摸拖拽相關的代碼了。

但是沒辦法，項目驅動學習啊~

自己死笨死笨的。。。這點代碼從想思路，到寫，到試錯，整整6個小時。。。笨死我算了

不過學習了很多東西，沒有用h5拖拽，是因為考慮兼容問題，主要是在webView 里跑，js還靠譜些..

笨死算逑！！！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。