移动端拖拽排序 html,移动端拖拽排序

本文详细介绍了如何使用H5的触摸事件和DOM操作实现一个可拖拽的主题列表,包括事件绑定、移动效果及排序后通过AJAX更新服务器。适合初学者理解前端交互技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

笨死算逑!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值