使用Hammer做一个类似于苹果手机多的AssistiveTouch一样的东西，可以随意拖动

首先先到GitHub上面下载该插件

导入对应的js文件。注：hammer是基于jQuery的，必须引入jQuery/zepto
<script src="jquery.min.js"></script>
<script src="hammer.js"></script>

html文件结构如下
<div id="circleDiv">拖动</div>
对应的css文件
#circleDiv{
    width: 3.6667rem;
    height:3.6667rem;
    line-height: 3.6667rem;
    text-align: center;
    background-color: #cc99cc;
    border-radius: 50%;
    position: fixed;
    bottom: 3.6667rem;
    left: 0;
}

想要更漂亮可以自己设计
相应的js文件如下
function panAction（）{


var circleDiv = $("#circleDiv");
    var circleLeft = circleDiv.css("left").replace("px",'')-0;
    var circleBottom = circleDiv.css("bottom").replace("px",'')-0;
    var circleSize = circleDiv.css("width").replace("px",'')-0;
    var screenW = screen.availWidth;
    var screenH = screen.availHeight;


    var circle = document.getElementById("circleDiv");
    var mc1 = new Hammer.Manager(circle);
    var pan = new Hammer.Pan();//平移
    mc1.add(pan);


    mc1.on('panstart',function(e){
        circleLeft = circleDiv.css("left").replace("px",'')-0;
        circleBottom = circleDiv.css("bottom").replace("px",'')-0;
    });
    mc1.on('pan',function(e){
        circleDiv.css({"left":circleLeft+ e.deltaX,"bottom":circleBottom- e.deltaY});
    });
    mc1.on('panend',function(e){
        var circleY = circleDiv.offset().top
        var circleX = circleDiv.offset().left;
        circleX > (screenW-circleSize)/2 ? circleDiv.css('left',screenW-circleSize):circleDiv.css('left',0);


        if (circleY >= screenH-circleSize){
            circleDiv.css('bottom',0)，
        }
        if(circleY < 0){
            circleDiv.css('bottom',screenH-circleSize);
        }
    });
}

这样一个粉圆在你的屏幕就可以随意拖动了。以上做了边界处理，若不需要可自行修改