jQueryUI之交互

最新推荐文章于 2025-08-07 21:29:52 发布

weixin_30788239

最新推荐文章于 2025-08-07 21:29:52 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/yqlog/p/5596145.html

博客介绍了UI的相关操作功能，包括允许拖动、拖入、列表选择以及列表cell拖动排序。这些功能可提升用户交互体验，在前端开发的UI设计中较为重要。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../jquery-2.2.4.min.js"></script>
		<script src="jquery-ui.min.js"></script>
		<link rel="stylesheet" href="jquery-ui.min.css" type="text/css" />
		<style>
			.ui-selected {
				background: #004099;
			}
		</style>
		<script>
			//允许拖动
			$(function() {
				//可拖动
				$('#div1').draggable();
				//可拖入
				$('#div2').droppable();
				$('#div2').on('drop', function(event, ui) {
					alert();
				});
				$('#div3').resizable();

				//列表选择
				$('#select').selectable();
				$('#btn').button();
				$('#btn').on('click', function() {
					if ($('#right').hasClass('ui-selected')) {
						alert('回答正确');
					}
				})

				//列表拖动排序
				$('.sort').sortable();
			})
		</script>
	</head>
	<div id='div1' style="width: 100px ; height: 100px ; border: 1px solid black;">draggable</div>
	<div id='div2' style="width: 200px ; height: 200px ; border: 1px solid red;">droppable</div>
	<div id='div3' style="width: 300px ; height: 300px ; border: 1px solid red;">resizeable</div>

	<!--selecteable-->
	<p>世界上最美丽的人是？</p>
	<ul id="select">
		<li id="right">A.me</li>
		<li>B.我</li>
		<li>C.I</li>
	</ul>

	<a href="#" id="btn">提交</a>

	<!--<button class="sort">1</button>
	<button class="sort">2</button>
	<button class="sort">3</button>
	<button class="sort">4</button>-->
	<ul class="sort">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

	<body>
	</body>

</html>

　　一共4项：允许拖动，拖入，列表选择，列表cell拖动排序

转载于:https://www.cnblogs.com/yqlog/p/5596145.html