mui手势拖拽div盒子

梦晨黑

已于 2024-08-16 14:17:40 修改

阅读量213

点赞数 1

分类专栏： MUI 文章标签： javascript 前端

于 2024-08-16 14:00:09 首次发布

本文链接：https://blog.csdn.net/2302_80695016/article/details/141258121

版权

MUI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

fileName:index.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入外部CSS样式表，用于页面样式 -->
		<link rel="stylesheet" type="text/css" href="./css/mui.css" />
	</head>
	<style>
		.box1 {
			width: 200px;
			height: 200px;
			background-color: blue;
			position: absolute;
			/* 定义绝对定位的蓝色方块样式 */
		}
	</style>
	<body>
		<!-- 创建一个具有.box1类的div元素，作为可拖动的方块 -->
		<div class="box1"></div>
		<!-- 引入外部JavaScript库，用于页面交互功能 -->
		<script src="./js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 初始化MUI框架，配置手势配置
			mui.init({
				gestureConfig: {
					tap: true, // 单击手势
					doubletap: true, // 双击手势
					longtap: true, // 长按手势
					swipe: true, // 滑动手势
					drag: true, // 拖动手势
					hold: false, // 持续手势
					release: false // 释放手势
				}
			});
			// 获取页面中.box1类的元素
			var box1 = document.querySelector('.box1')
			var ix = 0 , iy = 0;
			var cx = 0 , cy = 0;
			// 为.box1元素添加触摸开始事件监听器
			box1.addEventListener('touchstart',(e)=>{ // 触摸开始事件
				e.preventDefault() // 阻止默认行为
				ix = e.touches[0].clientX - cx // 计算初始X轴偏移量
				iy = e.touches[0].clientY - cy // 计算初始Y轴偏移量
			},false)
			// 为.box1元素添加触摸移动事件监听器
			box1.addEventListener('touchmove',(e)=>{ // 触摸移动事件
				e.preventDefault() // 阻止默认行为
				cx = e.touches[0].clientX - ix // 更新X轴偏移量
				cy = e.touches[0].clientY - iy // 更新Y轴偏移量
				box1.style.top = cy + 'px' // 设置方块的top样式
				box1.style.left = cx + 'px' // 设置方块的left样式
			},false)
		</script>
	</body>
</html>