js触屏端拖拽实现

最新推荐文章于 2024-05-27 14:01:31 发布
hangGe0111
最新推荐文章于 2024-05-27 14:01:31 发布
阅读量396
点赞数
分类专栏： Web 文章标签：九宫格拖拽图片
Web 专栏收录该内容
48 篇文章 0 订阅
订阅专栏
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效果