zoukankan      html  css  js  c++  java
  • 移动端实现拖拽功能

    移动端实现拖拽功能 :当在一个界面里想要实现一个可拖拽的导航条时,需要考虑一下因素

    1 判断开始拖拽的操作,只有移动一点距离才会移动,不然会与点击事件混乱,move移动时阻止点击事件

    event.preventDefault()

    2 当移动到底之后可进行用户提示,防止用户以为不能移动了

    <script>
        // 移动端拖拽
        var startX, startY, endX, endY, changeX, changeY;
        $('#ccdrag').bind("touchstart", function (event) {
            event.preventDefault();
            if (!event.touches.length) return;
            var touch = event.touches[0];
            startX = touch.pageX;
            console.log("开始位置"+startX)
            endX = startX;
        });
        $('#ccdrag').bind("touchmove", function (event) {
            event.preventDefault();
            if (!event.touches.length) return;
            var touch = event.touches[0];
            startX = endX;
            endX = touch.pageX;
            changeX = endX - startX;
            // console.log("移动"+changeX+" "+changeY);
            // console.log(changeX);
            var ml = (parseInt(cc.css('margin-left'))+changeX);
            // console.log(ml)
            // 拖到底就不能再拖动
            if(ml < 0 && ml > (len+60) ){
                var mlrem = ml/100 +'rem';
                cc.css("margin-left",ml);
            }   
        });
        $('#ccdrag').bind("touchend", function (event) {
            event.preventDefault();
        });
    </script>
  • 相关阅读:
    javascript实现简单的轮播图片
    用struts实现简单的登录
    非非是
    javabean连数据库
    超级迷宫 nabc
    我的Time
    SQL SERVER 2008 评估期已过
    《架构漫谈》有感
    c#
    与String有关的强制转换
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4747974.html
Copyright © 2011-2022 走看看