案例：类似课程表的框架

课程表框架

零零碎碎及思路

1. 触摸事件里面的changedTouches封装在originalEvent中
2. 内容左移时要计算好位置，在触摸开始时获取内容left值，并给差值（dec=end-start）加上此left值，理解为在上一次的移动结束（left）基础上再偏移指定距离（dec）
3. 左右移动时有偏差，在判断左右边界时代码要拆开写(左边界和右边界分开判断)
4. 添加了列（节数）后要调整左右滑动的左临界值
5. 同理添加列
6. 在写左右边界时如果没有return，不会固定左边界的值！！！
7. 为了避免斜着滑动时事件之间互相影响，用函数判断确定的方向

实现效果

核心代码

1. 精确的判断上下左右方向，避免斜着滑动时事件的相互影响

  function changewait(x, y) {
            if (Math.abs(x) > Math.abs(y) && x > 0) {
                return "right";
            }
            else if (Math.abs(x) > Math.abs(y) && x < 0) {
                return "left";
            }
            else if (Math.abs(y) > Math.abs(x) && y < 0) {
                return "up";
            }
            else if (Math.abs(y) > Math.abs(x) && y > 0) {
                return "down";
            }
            return ""
        }
    });

2. 检测边界值（以左右为例）

if (wait == "left" || wait == "right") {
                    if (Math.abs(senx) > Math.abs(seny)) {
                        console.log("左右");
                        /*如果划到右边界*/
                        if (Math.abs(decResx) >= maxLeft) {
                            content.css({
                                left: -maxLeft
                            });
                            week.css({
                                left: -maxLeft
                            });
                            return;
                        }
                        /*如果划到左边界*/
                        if (decResx > 100) {
                            content.css({
                                left: 100
                            });
                            week.css({
                                left: 100
                            });
                            return;
                        }

                        /*正常滑动*/
                        if (Math.abs(decResx) <= maxLeft) {
                            content.css({
                                left: decResx
//                            top: decResy
                            });
                            week.css({
                                left: decResx
                            });
                            /*   time.css({
                             top: decResy
                             });*/
                        }
                    }
                }

3. 元素的获取及一些基本运算

/*始末x，y坐标,记录当前left top值*/
        var startx, endx, moLeft;
        var starty, endy, moTop;
        /*获取元素*/
        var content = $(".content");
        var week = $(".week");
        var time = $(".time");
        var maxLeft = content.width() - $(window).width();//350
        var maxTop = content.height() - $(window).height();//89
        content.on("touchmove touchstart", function (e) {
            var x = e.originalEvent.changedTouches[0].pageX;
            var y = e.originalEvent.changedTouches[0].pageY;
            if (e.type == "touchstart") {
                /*获取起始位置坐标*/
                startx = x;
                starty = y;
                moLeft = parseFloat(content.css("left"));
                moTop = parseFloat(content.css("Top"));
            } else {
                endx = x;
                endy = y;
                // 检测用户上下滑动还是左右滑动
                var senx = endx - startx;
                var seny = endy - starty;
                var decResx = endx - startx + moLeft;
                var decResy = endy - starty + moTop;
                /*判断方向部分代码……*/