使用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);

        }

    });

}

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