jQuery UI中的Draggable, Droppable, Resizable, Selectable的用法

jQuery UI是一个基于jQuery的JavaScript库，它提供了一系列的用户界面组件和交互效果，包括对、拖放、排序、项卡、自动完成、器等等。其中，Draggable、Droppable、Resizable和Selectable是jQuery UI中常用的互果组件，本攻略将详细介绍它们的用法。

Draggable

Draggable是jQuery UI中的一个交互效果组件，它可以使元素可拖动。以下是Draggable的用法：

$(selector).draggable);

selector是要应用Draggable效果的元素选择器，options是一个可选的选项对象，用于配置Draggable效果的行为。以下是一些用的选项：

axis：限制拖动的方向，可以是"x、"y"或false`。
contain：制拖动的范围，可以是一个选择器、一个元素或"parent"。
cursor：拖动时鼠标的样式。
handle：指定拖动的手柄元素。
opacity：拖动时元素的透明度。
revert：拖动结束后元素是否返回原位置。
snap：拖动时元素是否吸附到网格或其他元素上。
stack：拖动时元素的层叠顺序。

以下是一个示例，演示了如何使用Draggable使元素可拖动：

<!DOCTYPE html>
<html>
<head>
  <title>My Draggable App</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>
  <script>
    $(function() {
      $("#my-draggable").draggable();
    });
  </script>
</head>
<body>
  <div id="my-draggable" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>

在上述示例中，我们使用$("#my-draggable").draggable()方法来使<div>元素可拖动。我们没有提供任何选项，因此使用默认选项。我们在<div>元素中设置了一些样式，以便在页面上显示红色的正方形。

当我们在页面上拖动这个正方形，它会随着鼠标的移动而移动。这是因为我们使用了jQuery UI的Draggable效果，使这个元素可拖动。

Droppable

Droppable是jQuery UI中的一个交互效果组件，它可以使元素可拖放。以下是Droppable的用法：

$(selector).droppable(options);

其中，selector是要应用roppable效果的元素选择器，options是一个可选的选项对象，用于配置Droppable效果的行为。以下是一些常用的选项：

accept：指定可以拖放的元素选择器。
-activeClass`：拖放时元素样式类。
hoverClass：拖放时鼠标悬停在元素上的样式类。
drop：拖放结束时的回调函数。

以下是一个示例，演示了如何使用Droppable使元素可拖放：

<!DOCTYPE html>
<html>
<head>
  <title>My Droppable App</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>
  <script>
    $(function() {
      $("#my-droppable").droppable({
        drop: function(event,) {
          $(this).addClass("dropped");
        }
      });
    });
  </script>
  <style>
    #my-droppable {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .dropped {
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="my-droppable"></div>
  <div id="my-draggable" style="width: 50px; height: 50px; background-color: blue;"></div>
</body>
</html>

在上述示例中，我们$("#my-dable").droppable()方法来使<div>元素可拖放。我们使用drop选项来指定拖放结束时的回调函数，该函数将为目标元素添加一个样式类。我们在<style>标签中定义了两个样式类，以便在页面上显示红色的正方形和蓝色的正方形。

当我们将蓝色的正方形拖放到红色的正方形上时，红色的正方形会变成绿色这是因为我们使用了jQuery UI的Droppable效果，使这个元素可拖放。

Resizable

Resizable是jQuery UI中的一个交互效果组件，它使元素可调整大小。以下是Resizable的用法：

$(selector).resizable(options);

其中，selector是要应用Resizable效果的元素选择器，options是一个可选的选项对象，用于配置Resizable效果的行为。以下是一些常用的选项：

aspectRatio：限制调整大小的宽高比。
autoHide：调整大小时是否自动隐藏调整大小的手柄。
containment：限制调整大小的范围，可以是一个选择器、一个元素或"parent"。
handles：指定调整大小的柄元素。
maxHeight：调整大小的最大高度。
maxWidth调整大小的最大宽度。
min：调整大小的最小高度。
minWidth：调整大小的最小宽度。

以下一个示例，演示了如何使用Resizable使元素可调整大小：

<!DOCTYPE html>
<html>
<head>
  <title>My Resizable App</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>
  <script>
    $(function() {
      $("#my-resizable").resizable();
    });
  </script>
  <style>
    #my-resizable {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="my-resizable"></div>
</body>
</html>

在上述示例中，我们使用$("#my-resizable").resizable()方法来使<div>元素可调整大小。我们没有提供何选项，因此使用默认选项。我们在<div>元素中设置了一些样式，以便在页面上显示红色的正方形。

当我们在页面上调整这个方形的大小时，它会随着调整大小的手柄的移动而变化这是因为我们使用了jQuery UI的Resizable效果，使这个元素可调整大小。

Selectable

Selectable是jQuery UI中的一个交互效果组件，它可以使元素选择。以下是Selectable的用法：

$(selector).selectable(options);

其中，selector是要应用Selectable效果的元素选择器，options是一个可选的选项对象，用于配置Selectable效果的行为。以下是一些常用的选项：

autoRefresh：是否自动刷新选择区域。
cancel：指定不可选择的元素选择器。
disabled：是否禁用Selectable效果。
filter：指定可选择的元素选择器。
tolerance：指定选择区域的容差。

以下是一个示例，演示了如何使用Selectable使元素可选择：

<!DOCTYPE html>
<html>
<head>
  <title>My Selectable App</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>
  <script>
    $(function() {
      $("#my-selectable").selectable();
    });
  </script>
  <style>
    #my-selectable li {
      width: 100px;
      height: 50px;
      background-color: red;
      margin: 10px;
      float: left;
      list-style: none;
    }
    .ui-selected {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul id="my-selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

在上述示例中，我们使用$("#my-selectable").selectable()方法来使<ul>元素中的<li>元素可选择。我们没有提供任何选项，因此使用默认选项。我们在<style>标签中了两个样式类，以便在页面上显示红色的正方形和绿色的正方形。

当我们在页面上选择这些正方形时，它会变成绿色。这是因为我们使用了jQuery UI的Selectable效果，使这些元素可选择。

结论

通过本攻略，我们了解了jQuery UI中的Draggable、Droppable、Resizable和Selectable的用法。我们提供了每个组件的用法和常用选项，并演示了两个示例，分别演示了如何使用Draggable和Droppable使元素可拖和可拖放，以及如何使用Resizable和Selectable使元素可调整大小和可选择。使用这些方法，我们可以轻松地创建富交性的Web应用程序，提高用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI中的Draggable, Droppable, Resizable, Selectable的用法是什么 - Python技术站