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