jQuery UI实现拖动达到自定义布局

最新推荐文章于 2025-06-03 09:11:34 发布

原创最新推荐文章于 2025-06-03 09:11:34 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个简单的HTML和JavaScript示例，利用jQuery UI库来实现在左侧菜单点击切换右侧图片并实现图片的拖动功能。通过点击不同菜单项，对应的图片将显示并可被拖动，为自定义布局提供了互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是实现的简单的demo，利用左侧菜单栏，点击菜单栏控制图片的显示，进而实现拖动自定义布局
在这里插入图片描述
一、引入相关文件

<link rel="stylesheet" type="text/css" href="../libs/jQueryUI/jquery-ui.css"/>
<script src="../libs/jQuery/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/jQueryUI/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

二、HTML部分

<nav id="header">最佳Partner</nav>
<div id="container">
	<ul class="leftCon">
		<li data-id="tab1">模板1</li>
		<li data-id="tab2">模板2</li>
		<li data-id="tab3">模板3</li>
	</ul>
	<div class="rightCon">
		<div>
			<img src="../img/cool.jpg" >
		</div>
		<div>
			<img src="../img/person.jpg" >
		</div>
		<div>
			<img src="../img/nice.jpg" >
		</div>
	</div>
</div>

三、js部分

<script type="text/javascript">
$(".leftCon li").click(function(e){
	const currentLi = $(e.target).data("id");
	if(currentLi == 'tab1'){
		$(".rightCon div").eq(0).css({
			"display":"block"
		})
		$(".rightCon div").eq(0).draggable()
	}else if(currentLi == 'tab2'){
		$(".rightCon div").eq(1).css({
			"display":"block"
		})
		$(".rightCon div").eq(1).draggable()
	}else{
		$(".rightCon div").draggable()
		$(".rightCon div").eq(2).css({
			"display":"block"
		})
		$(".rightCon div").eq(2).draggable()
	}
})
</script>