jQuery UI简单的讲解
jQuery UI是jQuery的一个扩展库，主要提供了一系列UI方面的功能，例如交互式组件(对话框、拖拽、放置)、视觉效果(动画、改变大小、旋转)等。
以下是一个简单的使用jQuery UI的示例，使用了Draggable和Droppable功能，实现了一个简单的拖拽排序功能：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.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>在这个例子中，我们首先引入了必要的jQuery和jQuery UI库。然后，我们创建了两个div元素，一个用于拖拽，另一个作为放置的目标。在JavaScript代码块中，我们使用jQuery选择器选中这些元素，并分别调用.draggable()和.droppable()方法来使它们变为可拖拽和可放置的。当元素被放置在#droppable上时，我们更改了#droppable里p标签的内容来表示元素已被放置。
评论已关闭