移动端拖拽排序
移动端拖拽排序
十万猛虎下画山 发表于1年前
移动端拖拽排序
  • 发表于 1年前
  • 阅读 72
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 自身能力有限,写的比较垃圾....有大牛能给说说不足,和哪写的不好,将不胜感激。

 

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

 

笨死算逑!!!

共有 人打赏支持
粉丝 2
博文 61
码字总数 32927
×
十万猛虎下画山
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: