前端

Appearance

悬浮可拖动组件 - 移动端 ​

效果展示 ​

示例代码 ​

html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>悬浮可拖动组件 - 移动端</title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: gray;
				text-align: center;
			}

			#box {
				width: 50px;
				height: 50px;
				position: fixed;
				right: 20px;
				bottom: 200px;
				background-color: red;
				cursor: pointer;
				z-index: 10;
			}

			#footer {
				width: 100%;
				height: 100px;
				position: fixed;
				bottom: 0;
				background-color: blue;
			}
		</style>
	</head>
	<body>

		<div>悬浮可拖动组件 - 移动端</div>

		<div id="box"> </div>

		<div id="footer"></div>

	</body>
	<script>
		var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;

		//按下
		document.getElementById("box").addEventListener("touchstart", function(e) {
			_x_start = e.touches[0].pageX; //起始点击位置
			_y_start = e.touches[0].pageY; //起始点击位置
			left_start = $("#box").css("left"); //元素左边距
			top_start = $("#box").css("top"); //元素上边距
		});

		//移动
		document.getElementById("box").addEventListener("touchmove", function(e) {
			e.preventDefault(); //取消事件的默认动作。
			_x_move = e.touches[0].pageX; //当前屏幕上所有触摸点的集合列表
			_y_move = e.touches[0].pageY; //当前屏幕上所有触摸点的集合列表
			console.log(e.touches[0], 'e.touches[0]');
			//左边距=当前触摸点-鼠标起始点击位置+起始左边距
			$("#box").css("left", parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start));
			//上边距=当前触摸点-鼠标起始点击位置+起始上边距
			$("#box").css("top", parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start) + "px").css(
				'bottom', 'auto');
		});

		//松开
		document.getElementById("box").addEventListener("touchend", function(e) {

			var bodyW = $(window).width(); //屏幕宽
			var bodyH = $(window).height(); //屏幕高
			var _x_end = e.changedTouches[0].pageX; //松开位置
			var _y_end = e.changedTouches[0].pageY; //松开位置
			var divH = $("#box").height(); //元素高
			var divW = $("#box").width(); //元素宽

			var domRect = document.getElementById("box").getBoundingClientRect();
			console.log(domRect, 'domRect');

			var footerDom = document.getElementById("footer");
			var footerRect = {};
			if (footerDom) {
				footerRect = footerDom.getBoundingClientRect();
			}
			console.log(footerRect, 'footerRect');

			//当元素左边在屏幕外时
			if (parseFloat($("#box").css("left")) < 0) {
				//置于左边
				$("#box").css("left", 0); //置于顶部
			}

			//当元素右边在屏幕外时
			if (bodyW - domRect.right < 0) {
				//置于右边
				$("#box").css('left', 'auto').css("right", 0);
			}

			//当元素顶部在屏幕外时
			if (parseFloat($("#box").css("top")) < 0) {
				//置于顶部
				$("#box").css("top", 0); //置于顶部
			}

			//当元素底部在屏幕外时
			if (bodyH - footerRect.height < domRect.top + domRect.height) {
				//置于底部
				$("#box").css("top", 'auto').css("bottom", footerRect.height + 10);
			}
		});
	</script>
</html>
</html>