移动端实现拖拽功能

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

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>

 

转载于:https://www.cnblogs.com/huangxiaowen/p/4747974.html