shop-system
/
test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<style type="text/css">
	html,body{ position: absolute; width: 100%; height: 100%; margin: 0px; padding: 0px;}
	#div1{ width: 100%; height: 100%; position: relative; overflow: hidden;}
	#img-box{width: 800px; height: 800px; position: absolute; left: -100px; top: -100px;}
	#div1 img{ position: absolute; left: 0; top: 0; height: 800px;  }
	/*#div1 img{ position: absolute; left: 0; top: 0;  }*/

	</style>
</head>
<body>

	<div id="div1">
		<div id="img-box">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497607058528&di=2816848e9283fa7513bce6c0dbe69c70&imgtype=0&src=http%3A%2F%2Fimg.sj33.cn%2Fuploads%2Fallimg%2F201210%2F2012101121161762.jpg" alt="" id="drag">

			<div id="pos1" style="display: none; position: absolute; left: 200px; top: 200px; background: #fff;">
				1111
			</div>
		</div>
	</div>

	<script type="text/javascript">

	var drag = document.getElementById('img-box');
	var pos1 = document.getElementById('pos1');
	var startX = 0;
	var startY = 0;
	var offsetLeft = 0;
	var offsetTop = 0;
	var left = 0;
	var top1 = 0;
	//touchstart事件
	function touchSatrtFunc(evt) {
	    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
	    var touch = evt.touches[0]; //获取第一个触点
	    var x = Number(touch.pageX); //页面触点X坐标
	    var y = Number(touch.pageY); //页面触点Y坐标
	    //记录触点初始位置
	    startX = x;
	    startY = y;

	    offsetLeft = drag.offsetLeft;
	    offsetTop = drag.offsetTop;


	}

	//touchmove事件
	function touchMoveFunc(evt) {
	    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
	    var touch = evt.touches[0]; //获取第一个触点
	    var x = Number(touch.pageX); //页面触点X坐标
	    var y = Number(touch.pageY); //页面触点Y坐标
	    left = offsetLeft+(x - startX);
	    top1 = offsetTop+(y - startY);

	    if(left>0){
            left=0;
        }
        else if(left <window.innerWidth-drag.offsetWidth){
            left = window.innerWidth-drag.offsetWidth;
        }


        console.log(offsetTop+(y - startY));
        console.log(window.innerHeight-drag.offsetHeight);

        if(top1>0){
            top1=0;
        }else if(top1 <window.innerHeight-drag.offsetHeight){
        	console.log(1)
            top1 = window.innerHeight-drag.offsetHeight;
        }

        // console.log(top);

        if(left >-400 && left <= -100){

        	pos1.style.display = 'block';
        }
        else{
        	pos1.style.display = 'none';
        }


	    if (x - startX != 0) {
	        //左右滑动
	        drag.style.left =  left+'px';
	    }

	    if (y - startY != 0) {
	        //上下滑动
	        drag.style.top =  top1+'px';
	    }


	}

	drag.addEventListener("touchstart", touchSatrtFunc);
	drag.addEventListener("touchmove", touchMoveFunc);
	drag.addEventListener("touchend", function(){


	});

	var eventFn = function (event) {
	    event.preventDefault();
	}
	document.body.addEventListener('touchmove', eventFn,false);

	document.body.removeEventListener('touchend', eventFn,false);

	</script>
</body>
</html>