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效果
