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还靠谱些..

笨死算逑！！！