移动、拖拽、吸附、HTML

最新推荐文章于 2021-12-17 15:12:07 发布

程序员_胡子

最新推荐文章于 2021-12-17 15:12:07 发布

阅读量933

点赞数 1

分类专栏： HTML 文章标签：在线布局

本文链接：https://blog.csdn.net/qq_36267404/article/details/90345791

版权

本文探讨如何在HTML中实现元素的移动、拖拽和吸附功能，为在线布局提供灵活的操作体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- jquery -->
		<script src="js1/jquery.min.js"></script>
		<!-- jquery-ui -->
		<link rel="stylesheet" href="js1/jquery-ui.min.css">
		<script src="js1/jquery-ui.min.js"></script>
		<style>
			body {
				font-family: courier new, courier;
				font-size: 12px;
			}

			.draggable {
				border: 1px solid #ccc;
				display: inline-block;
				cursor: move;
				position: absolute;
				padding: 30px;
			}

			.guide {
				display: none;
				position: absolute;
				left: 0;
				top: 0;
			}

			#guide-h {
				border-top: 1px dashed #55f;
				width: 100%;
			}

			#guide-v {
				border-left: 1px dashed #55f;
				height: 100%;
			}
		</style>
	</head>

	<body>

		<div class="draggable">1111111</div>

		<div class="draggable">2222222</div>

		<div class="draggable">3333333</div>

		<!--拖动辅助线-->

		<div id="guide-h" class="guide"></div>
		<div id="guide-v" class="guide"></div>

	</body>


	<script>
		//捕获的最小距离
		var MIN_DISTANCE = 8;
		// 没有可用的引导\导轨 
		var guides = [];
		var innerOffsetX, innerOffsetY;


		$(".draggable").draggable({

			//拖拽开始
			start: function(event, ui) {
				//$(".draggable").not(this) 不包过自己
				guides = $.map($(".draggable").not(this), computeGuidesForElement);

				//offsetX、offsetY：元素的X,Y坐标
				innerOffsetX = event.offsetX;
				innerOffsetY = event.offsetY;
			},

			//拖拽的时候
			drag: function(event, ui) {
				//迭代所有的guids，记住最近的h和v guids

				
				var guideV, guideH, distV = MIN_DISTANCE + 1,
					distH = MIN_DISTANCE + 1,
					offsetV, offsetH;

				//
				var chosenGuides = {
					top: {
						dist: MIN_DISTANCE + 1
					},
					left: {
						dist: MIN_DISTANCE + 1
					}
				};

				var $t = $(this);


				var pos = {
					top: event.pageY - innerOffsetY,
					left: event.pageX - innerOffsetX
				};

				//元素的宽。包含 padding 和 border
				var w = $t.outerWidth() - 1;
				var h = $t.outerHeight() - 1;

				
				var elemGuides = computeGuidesForElement(null, pos, w, h);

	
				$.each(guides, function(i, guide) {
					
					$.each(elemGuides, function(i, elemGuide) {
						
						if (guide.type == e