jQueryUI 1.10：jQuery 的用户界面库
jQuery UI是一套基于jQuery的用户界面扩展插件，它提供了丰富的Widget、交互式UI元素、视觉效果和主题等。
以下是使用jQuery UI的一个简单示例，展示了如何使用其拖放功能（Draggable）和放置功能（Droppable）：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>拖动我!</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>放置我!</p>
</div>
<script>
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("放置成功!");
}
});
});
</script>
</body>
</html>在这个例子中，我们创建了两个div元素，一个可以拖动（#draggable），另一个可以接受拖动元素并在拖动后改变其内容（#droppable）。通过调用jQuery的.draggable()和.droppable()方法，我们分别使得#draggable元素可拖动，并使得#droppable元素可以接受拖动物品并在物品放置后触发一个函数。
评论已关闭