如何在数据库 mysql 中保存 jquery 可排序的连接列表？

Question

大家好，我有两个连接列表，但我不知道如何正确传递或获取值

我有两个列表

左边的列表：我要添加的值是“0”，表示它是不活动的

右列表: 我要添加的值是“1”，这意味着它是活动的 也有值位置

Image for more details

这是我的HTML代码：

<h5>inactive fruit</h5>
<ul id="sortable1" class="connectedSortable">

        <?php foreach($rows as $row){
                        if($row['active'] === '0'){ ?> 
        
            <li class="ui-state-default"><?php echo $row['name']?></li>
        
        <?php   }}?>
</ul>


<h5>Active Market</h5>
<ul id="sortable2" class="connectedSortable">

    <?php foreach($rows as $row){
                        if($row['active'] === '1'){ ?> 
        
            <li class="ui-state-default"><?php echo $row['name']?></li>
        
        <?php   }}?>
</ul>

这是js代码：

  <script>
   $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
        }).disableSelection();
   } );
  </script>

我想用 ajax

数据库结构是：

ID（整数），

名称 (varchar),

active (varchar) number 1表示active number 2表示inactive,

位置等级的位置（varchar）

Answer 1

考虑以下示例。

jQuery(function($) {
  function sendData(api, data) {
    $.post(api, data, function(results) {
      console.log(results);
    });
  }
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    update: function(event, ui) {
      // This event is triggered when the user stopped sorting and the DOM position has changed.
      var inactive = $("#sortable1").sortable("serialize");
      var active = $("#sortable2").sortable("serialize");
      console.log(inactive, active);
      sendData("updateFruit.php", {
        inactive: inactive,
        active: active
      });
    }
  }).disableSelection();
});

.column {
  margin: 0;
  padding: 0;
  width: 200px;
  text-align: center;
  float: left;
}

.column h5 {
  padding: 0.4em;
  margin: : 0;
}

.column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.column ul li {
  padding: 0.4em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="column ui-widget">
  <h5>Inactive fruit</h5>
  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="fruit-1">Mango</li>
    <li class="ui-state-default" id="fruit-2">Orange</li>
    <li class="ui-state-default" id="fruit-3">Kewi</li>
  </ul>
</div>
<div class="column ui-widget">
  <h5>Active Market</h5>
  <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-default" id="fruit-4">Banana</li>
  </ul>
</div>

这使用了几个不同的选项：

您的 PHP 脚本必须处理发布的数据。类似于：

<?php

$active = array();
$inactive = array();

if(isset($_POST['active'])){
  $active = json_decode($_POST['active']);
}
if(isset($_POST['active'])){
  $inactive = json_decode($_POST['inactive']);
}

$rows = array();
$count = 0;

foreach($active as $name){
  array_push($rows, array(
    "name" => $name,
    "active" => 1,
    "position": $count++
  ));
}

$count = 0;

foreach($inactive as $name){
  array_push($rows, array(
    "name" => $name,
    "active" => 0,
    "position" => $count++
  ));
}

// Connect to MySQL DB, stored to $mysqli
// Generate Update Code, either unique Statements or one large statement
foreach($rows as $row){
  $mysqli->query("UPDATE fruits SET active = {$row.active}, position = {$row.position} WHERE name = '{$row.name}';);
}

$mysqli->close();
?>

参考：

这是一个基本示例，您的代码可能会有所不同。此示例也不清理输入或再次保护 SQL 注入，应仅用作基本示例。生产代码应使用所有正确的 SQL 技术和最佳实践。

如何在数据库 mysql 中保存 jquery 可排序的连接列表？

How Can i save jquery sortable connected lists in database mysql?

javascript

php

jquery

ajax

jquery-ui