jQueryUI之互動

weixin_30788239發表於2020-04-05
jQueryUI
<!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

相關文章