手机端拖动div

1、简单的css

body {background-color: #eee;}
        .box {transition: all .05s linear;width: 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 });
        });