<!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=" 100px ; height: 100px ; border: 1px solid black;">draggable</div>
<div id='div2' style=" 200px ; height: 200px ; border: 1px solid red;">droppable</div>
<div id='div3' style=" 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拖动排序