博客

jQuery UI中的Draggable, Droppable, Resizable, Selectable的用法是什么

  • Post category:jquery

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是要应用Droppable效果的元素选择器，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, ui) {
          $(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-droppable").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：调整大小的最大宽度。
  • minHeight：调整大小的最小高度。
  • 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应用程序，提高用户体验。

Tags: