js触屏端拖拽实现
作者：互联网
1.整理
1.1代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var design_width = 750;
if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
var version = parseFloat(RegExp.$1);
if(version > 2.3) {
var phoneScale = parseInt(window.screen.width) / design_width;
document.write('<meta name="viewport" content="width=' + design_width + ", minimum-scale = " + phoneScale + ", maximum-scale = " + phoneScale + ', target-densitydpi=device-dpi">')
} else { document.write('<meta name="viewport" content="width=' + design_width + ', target-densitydpi=device-dpi">') }
} else { document.write('<meta name="viewport" content="width=' + design_width + ', user-scalable=no, target-densitydpi=device-dpi">') };
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.clearfix:before,
.clearfix:after {
content: '.';
display: block;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.box {
border: 1px solid red;
width: 360px;
margin: auto 0;
position: relative;
}
.ul {
margin: 10px 0;
}
.ul .li {
width: 100px;
height: 100px;
float: left;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
margin: 10px;
}
.ul .li-in {
width: 100px;
height: 100px;
float: left;
background-color: rgba(150, 10, 150, 0.2);
color: #fff;
position: absolute;
}
.ul3 {}
.litouch1 {
left: 10px;
top: 280px;
}
.litouch2 {
left: 130px;
top: 280px;
}
.litouch3 {
left: 250px;
top: 280px;
}
</style>
</head>
<body>
<div class="box">
<div class="boxT ul clearfix">
<div class="li">1.1</div>
<div class="li">1.2</div>
<div class="li">1.3</div>
</div>
<div class="boxC ul clearfix">
<div class="li" data-isgood='0'>2.1</div>
<div class="li" data-isgood='0'>2.2</div>
<div class="li" data-isgood='0'>2.3</div>
</div>
<div class="boxC ul clearfix ul3">
<div class="li" data-isgood='1'>
<div class="li-in litouch litouch1" datafp="0" data-index='3'>3.1</div>
</div>
<div class="li" data-isgood='1'>
<div class="li-in litouch litouch2" datafp="2" data-index='4'>3.2</div>
</div>
<div class="li" data-isgood='1'>
<div class="li-in litouch litouch3" datafp="1" data-index='5'>3.3</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//限制最大宽高，不让滑块出去
var maxW = $(document).width() - $(".li-in").width();
var maxH = $(document).height() - $(".li-in").height();
var touchStart_x = null,
touchStart_y = null,
touchMove_x = null,
touchMove_y = null,
boxStartX = null,
boxStartY = null;
var oL, oT, m_X, m_y;
var oLeft, oTop;
var boxp = new Array();
var lastindex;
window.onload = function() {
$.each($(".boxC .li"), function(i, n) {
var goodstatus = parseInt($(this).attr('data-isgood'));
boxp[i] = [$(this).position().left + parseFloat($(this).css("marginLeft")), $(this).position().top + parseFloat($(this).css("marginTop")), goodstatus];
});
$(".litouch").on("touchstart", function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = $(this).position().left;
oT = $(this).position().top;
m_X = touch.clientX - $(this).position().left;
m_y = touch.clientY - $(this).position().top;
lastindex = parseInt($(this).attr('data-index'));
document.addEventListener("touchmove", defaultEvent, { passive: false });
});
$(".litouch").on("touchmove", function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oLeft = touch.clientX - m_X;
oTop = touch.clientY - m_y;
if(oLeft < 0) {
oLeft = 0;
} else if(oLeft >= maxW) {
oLeft = maxW;
}
if(oTop < 0) {
oTop = 0;
} else if(oTop >= maxH) {
oTop = maxH;
}
$(this).css({
left: oLeft,
top: oTop
});
});
//触摸结束时的处理
$(".litouch").on("touchend", function(e) {
var objli = this;
var ev = e || window.event;
var isgood = false;
for(var i = 0; i < boxp.length; i++) {
if(boxp[i][2] == 0) {
var abs1 = Math.abs(boxp[i][0] - oLeft);
var abs2 = Math.abs(boxp[i][1] - oTop);
if(abs1 <= 10 && abs2 <= 10) {
if(lastindex >= 0) {
boxp[lastindex][2] = 0;
}
boxp[i][2] = 1;
$(objli).css({
left: boxp[i][0],
top: boxp[i][1]
}).attr('data-index', i);
isgood = true;
break;
}
}
}
if(!isgood) {
$(objli).animate({
left: oL,
top: oT
},500,'swing');
}
console.log("boxp:", boxp)
document.removeEventListener("touchmove", defaultEvent, { passive: false });
});
//阻止默认事件
function defaultEvent(e) {
e.preventDefault();
}
};
</script>
</body>
</html>
1.2效果
标签：oTop,top,拖拽,js,width,var,触屏,boxp,left 来源： https://blog.csdn.net/hangGe0111/article/details/90448387