📌  相关文章
📜  JQuery UI 保存可排序列表 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:12.205000             🧑  作者: Mango

JQuery UI 保存可排序列表 - Javascript

如果您正在寻找一种方法来创建可排序的列表，并且需要一种方法来保存用户对该列表所做的更改，则可以使用JQuery UI来实现此目标。

1. 下载和引用JQuery和JQuery UI库

将以下链接添加到您的HTML文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

这将下载和引用JQuery和JQuery UI库以及所需的CSS文件。

2. 创建HTML列表

在HTML文件中，创建您希望允许用户排序的列表。您可以使用无序列表（<ul>标记）或有序列表（<ol>标记）。

<ul id="sortable-list">
   <li>项一</li>
   <li>项二</li>
   <li>项三</li>
</ul>

这将创建一个简单的无序列表，其中包含三个列表项。

3. 让列表可排序

JQuery UI提供了一个名为sortable()的函数，它将使您的列表可排序。将此函数应用于您的列表。

$("#sortable-list").sortable({
  placeholder: "sortable-placeholder"
});

此代码将启用sortable()函数，并允许您拖动列表中的项以重新排序它们。placeholder选项将设置一个占位符，以指示将停放在哪个位置。

4. 添加保存功能

要添加保存功能，请使用 JQuery 的 ajax() 函数。该函数允许您将数据发送到服务器，并在服务器上进行处理。

$("#sortable-list").sortable({
  placeholder: "sortable-placeholder",
  stop: function(event, ui) {          
     $.ajax({
        url: "保存数据的URL",
        method: "POST",
        data: { list_order: $("#sortable-list").sortable("toArray") }
     }).done(function( msg ) {
         alert( "数据已保存: " + msg );
     });
  }
});

此代码将添加一个 stop 事件监听器，该事件将在拖动结束时触发。在该事件处理程序中，我们将使用 ajax() 函数将数据发送到服务器。数据将发送到名为“保存数据的URL”的服务器端脚本。我们还将使用 sortable() 函数的 toArray 方法来获取排序后的列表，并将其作为数据发送。最后，我们将在成功时弹出一个消息框。

5. 完整代码示例

以下是包含列表，排序和保存功能的完整代码示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>可排序列表 - 保存列表顺序</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

   <style>
      .sortable-placeholder {
        background-color:#f9f9f9;
        border:1px dashed #ccc;
        height:50px;
        width:100%;
      }
   </style>

   <script>
      $(function() {
         
         $("#sortable-list").sortable({
            placeholder: "sortable-placeholder",
            stop: function(event, ui) {          
               $.ajax({
                  url: "保存数据的URL",
                  method: "POST",
                  data: { list_order: $("#sortable-list").sortable("toArray") }
               }).done(function( msg ) {
                   alert( "数据已保存: " + msg );
               });
            }
         });
         
         $("#sortable-list").disableSelection();
         
      });
   </script>
</head>
<body>

   <h1>可排序列表 - 保存列表顺序</h1>

   <ul id="sortable-list">
      <li>项一</li>
      <li>项二</li>
      <li>项三</li>
   </ul>

</body>
</html>

以上就是使用JQuery UI保存可排序列表的完整示例。