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 }); });