jquery~区域内可随意拖动（移动端）样式css:
.barrage{
width: 70px;
height: 70px;
position: fixed;
top: 0;
background:-webkit-gradient(linear, 0 0, 100% 100%, from(#ff0000), to(#0000ff));
border-radius:50%;
}
.col1{
color: #fff;
display: block;
padding: 15px;
text-align: center;
}
html：
<div class="barrage">
<span class="col1">随意拖动</span>
</div>
JS:
var contW =$(".barrage").width();
var contH =$(".barrage").height();
var startX, startY, sX, sY, moveX, moveY;
var winW =$(window).width();
var winH =$(window).height();
$(".barrage").on({//绑定事件
touchstart:function(e){
startX = e.originalEvent.targetTouches[0].pageX;//获取点击点的X坐标
jquery弹出div窗口startY = e.originalEvent.targetTouches[0].pageY;//获取点击点的Y坐标
sX =$(this).offset().left;//相对于当前窗⼝X轴的偏移量
sY =$(this).offset().top;//相对于当前窗⼝Y轴的偏移量
leftX = startX - sX;//⿏标所能移动的最左端是当前⿏标距div左边距的位置
rightX = winW - contW + leftX;//⿏标所能移动的最右端是当前窗⼝距离减去⿏标距div最右端位置    topY = startY - sY;//⿏标所能移动最上端是当前⿏标距div上边距的位置
bottomY = winH - contH + topY;//⿏标所能移动最下端是当前窗⼝距离减去⿏标距div最下端位置},
touchmove:function(e){
e.preventDefault();
//移动过程中XY轴的坐标要减去margin的距离
moveX = e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
moveY = e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
//判断的时候要计算加上padding的距离
if(moveX < leftX){
moveX = leftX;
}
if(moveX > rightX){
moveX = rightX;
}
if(moveY < topY){
moveY = topY;
}
if(moveY > bottomY){
moveY = bottomY;
}
$(this).css({
"left": moveX + sX - startX,
"top": moveY + sY - startY,
})
},
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。