jQuery UI API 类别 - 交互
jQuery UI 的交互类别包含一系列组件，这些组件为网页提供了丰富的交互功能，如拖拽、缩放、旋转、排序等。下面是一个使用 jQuery UI 的 draggable（可拖拽）和 resizable（可调整大小）组件的示例代码。
首先，确保你已经包含了 jQuery 和 jQuery UI 的相关库：
html
<!DOCTYPE html>
<html lang="en"> haodanggui.com/6Gt0V7H8F
Lchtm.com/6Hq5J7W5O
beisinuomuying.com/6Ny4S8S7J
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI 交互示例</title>
<!-- 引入 jQuery 库 -->
<script src=";
<!-- 引入 jQuery UI 库 -->
<link rel="stylesheet" href=";
<script src=";
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
background-color: #f5f5f5;
展开全文
border: 1px solid #ccc;
#resizable {
width: 200px;
height: 150px;
padding: 0.5em;
background-color: #f5f5f5;
border: 1px solid #ccc;
</style>
</head>
<body>
<!-- 创建一个可拖拽的 div -->
<div id="draggable" class="ui-widget-content">
<p>点击并拖拽我</p>
</div>
<!-- 创建一个可调整大小的 div -->
<div id="resizable" class="ui-widget-content">
<p>点击并调整我的大小</p>
</div>
<script>
$(function() {
// 初始化 draggable 组件
$("#draggable").draggable({
handle: "p", // 拖拽的把手，这里是 div 内的 p 标签
opacity: 0.7, // 拖拽时的透明度
cursor: "move" // 鼠标样式
// 初始化 resizable 组件
$("#resizable").resizable({
handles: "all", // 允许所有方向的调整大小
aspectRatio: true, // 保持宽高比
animate: true, // 使用动画效果
resize: function(event, ui) {
// 可以在这里添加调整大小时的事件处理逻辑
console.log("Resizing: ", ui.size);
</script>
</body>
</html>
在这个示例中：
#draggable div 被初始化为一个可拖拽的元素。你可以通过点击并拖动这个 div 来移动它的位置。
#resizable div 被初始化为一个可调整大小的元素。你可以通过点击并拖动它的边缘来改变它的大小。
draggable 组件的 handle 选项允许你指定拖拽的把手，这里我们指定为 div 内部的 p 标签。opacity 选项在拖拽时改变元素的透明度，而 cursor 选项改变了鼠标的样式。
resizable 组件的 handles 选项允许你指定哪些边缘或角落可以用来调整大小。aspectRatio 选项保持元素的宽高比不变，animate 选项启用动画效果。resize 事件会在每次调整大小时触发，你可以在这里添加自己的逻辑。
请注意，为了使用这些交互功能，你需要在页面上包含 jQuery 和 jQuery UI 的库文件，并且需要在文档加载完成后（即 $(function() {...}); 内）初始化这些组件。
评论