<style>
html {
font-size: 100px;
}
.drag {
position: absolute;
top: 2rem;
left: 2rem;
}
.Box {
width: 0.5rem;
height: 0.5rem;
border: 1px solid black;
background: #F7F5F5;
}
</style>
<div class="Box drag a" style="font-size: 0.16rem;background-color: #56b0ff;">
</div>
<div class="Box drag b" style="font-size: 0.16rem;background-color: #beff59;">
</div>
<script src="jquery.min.js"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>
<script>
function move(className) {
var isMove = false;
var X, Y;
var left, top;
$("." + className).bind('mousedown', function (e) {
isMove = true;
X = e.pageX - parseInt($("." + className).css("left"));
Y = e.pageY - parseInt($("." + className).css("top"));
})
$("." + className).bind('touchstart', function (e) {
isMove = true;
X = e.originalEvent.touches[0].clientX - parseInt($("." + className).css("left"));
Y = e.originalEvent.touches[0].clientY - parseInt($("." + className).css("top"));
})
$(document).bind('mousemove', function (e) {
if (isMove) {
left = e.pageX - X;
top = e.pageY - Y;
if (left < 0) {
left = 1
}
if (top < 0) {
top = 1
}
if (left > $(window).width() - $("." + className).width()) {
left = $(window).width() - $("." + className).width() - 2
}
if (top > $(window).height() - $("." + className).height()) {
top = $(window).height() - $("." + className).height() - 2
}
$("." + className).css({left: left, top: top});
}
})
$(document).bind('touchmove', function (e) {
if (isMove) {
left = e.originalEvent.touches[0].clientX - X;
top = e.originalEvent.touches[0].clientY - Y;
if (left < 0) {
left = 2
}
if (top < 0) {
top = 2
}
if (left > $(window).width() - $("." + className).width()) {
left = $(window).width() - $("." + className).width() - 2
}
if (top > $(window).height() - $("." + className).height()) {
top = $(window).height() - $("." + className).height() - 2
}
$("." + className).css({left: left, top: top});
}
})
$(document).bind('mouseup', 'touchend', function (e) {
isMove = false;
})
}
move("a");
move("b");
</script></code></pre>
<br/>
</div>
</div>
</div>
</div>