• 手机端拖动div


    1、简单的css

    body {background-color: #eee;}
            .box {transition: all .05s linear; 5rem;height: 5rem;cursor: move; position: absolute; top: 0; left: 0; background-color: #FFF; border: 1px solid #CCCCCC;  -webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;}
    

    2、接着js(注意写了如果出界就返回的方法,不需要就删掉)

    $(function() {
            var pageY,pageX;
            $(document).on("touchmove",function(e){
                if (!!this.move) {
                    var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                            callback = document.call_down || function() {
                                        $(this.move_target).css({
                                            'top': e.touches[0].pageY - posix.y,
                                            'left': e.touches[0].pageX - posix.x
                                        });
                                        pageY=e.touches[0].pageY;
                                        pageX=e.touches[0].pageX;
                                    };
    
                    callback.call(this, e, posix);
                }
            }).on("touchend",function(e){
                if (!!this.move) {
                    var callback = document.call_up || function(){
                                var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix;
                                if(posix.y+ pageY>=window.innerHeight){
                                    $(this.move_target).css({
                                        'top': window.innerHeight-$(".box").height()
                                    });
                                }else if(parseFloat($(".box").css("top"))<0){
                                    $(this.move_target).css({
                                        'top': 0
                                    });
                                }
                                if(posix.x+ pageX>=window.innerWidth){
                                    $(this.move_target).css({
                                        'left': window.innerWidth-$(".box").width()
                                    });
                                }else if(parseFloat($(".box").css("left"))<0){
                                    $(this.move_target).css({
                                        'left': 0
                                    });
                                }
                            };
                    callback.call(this, e);
                    $.extend(this, {
                        'move': false,
                        'move_target': null,
                        'call_down': false,
                        'call_up': false
                    });
                }
            });
    
            var $box = $('.box').on("touchstart",function(e){
                var $p = $(this);
                var $pp = $p[0];
                var offset = $p.offset();
                $pp.posix = {'x': e.touches[0].pageX - offset.left, 'y': e.touches[0].pageY - offset.top};
                $.extend(document, {'move': true, 'move_target':$pp });
            });
    

      

  • 相关阅读:
    Plug It In
    The King's Walk
    Water Testing 匹克定理
    基尔霍夫矩阵
    nginx 常用的命令
    Nginx window安装
    使用nrm管理 npm 镜像仓库
    window 安装node.js
    变量和数据类型
    同步,异步,阻塞,非阻塞
  • 原文地址:https://www.cnblogs.com/huangqiming/p/6669498.html
Copyright © 2020-2023  润新知