jQuery UI Sortable destroy()方法详解

jQuery UI Sortable是一个排序插件，它允许用户通过拖动元素来重新排序。在本文中，将详细介绍Sortable destroy()方法的法和示例。

destroy()方法

destroy()方法是Sortable插件的方法，它用于毁Sortable列表。使用该方法可以在不需要Sortable列表销毁它。

语法

以下是destroy()方法的语法：

$(selector).sortable("destroy");

其中，selector是要销毁Sortable列表的元的选择器。

示例1：使用destroy()销毁Sortable列表

以下是使用destroy()方法销毁Sortable列表的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Sortable destroy()方法示例</>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.jsscript>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#sortable").sortable();
      $("#destroy-btn").click(function() {
        $("#sortable").sortable("destroy");
      });
    });
  </script>
</head>
<body>
  <ul id="sortable">
    <li>Item 1</li>
 <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button id="destroy-btn">销毁Sortable列表</button>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和UI库。然后我们创建了一个<ul>元素，并使用Sortable插件使其成为可排序的列表。接下来，我们使用destroy()方法在点击按钮时销毁Sortable列表。

示例2：使用destroy()方法销毁Sortable列表并恢复原始状态

以下是使用destroy()方法毁Sortable列表并恢复原始状态的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Sortable destroy()方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
    $(function() {
      var originalHtml = $("#sortable").html();
      $("#sortable").sortable();
      $("#destroy-btn").click(function() {
        $("#sortable").sortable("destroy");
        $("#sortable").html(originalHtml);
      });
    });
  </script>
</head>
<body>
  <ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul  <button id="destroy-btn">销毁Sortable列表恢复原始状态</button>
</body>
</html>

在上面的示例中，我们首先引入了jQuery和UI库。然后我们创建了一个<ul>元素，并使用Sortable插件使其成为可排序的。接下来，我们使用destroy()方法在点击按钮时销毁Sortable列表，并使用原始HTML代码恢复原始状态。

总结

Sortable destroy()方法用于销毁Sortable列表。可以使用该方法在不需要Sortable列表销毁它。在实际开发中，我们可以根据需要使用destroy方法，并相应执行操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI Sortable destroy()方法 - Python技术站

jQuery UI Sortable destroy()方法

jQuery UI Sortable destroy()方法详解

destroy()方法

语法

示例1：使用destroy()销毁Sortable列表

示例2：使用destroy()方法销毁Sortable列表并恢复原始状态

总结

相关文章