保存按钮不适用于 jQuery-UI 连接的可排序列表

Question

根据 Test Drag&Drop element with connectedSortable from sortable1 在左侧和 sortable2 在右侧通过保存按钮，我们仍然存在结果数组数据未发送到我的数据库的问题。

HTML 文件

<div style="margin: 25px 0;">
  <button id="save">Save</button>
</div>

<ul id="sortable1" class="connectedSortable"><b>Left side</b>
  <!--<?php echo $column1; ?>-->
  <li id="entry_1" class="ui-state-default">Entry #1</li>
  <li id="entry_2" class="ui-state-default">Entry #2</li>
  <li id="entry_3" class="ui-state-default">Entry #3</li>
</ul>

<ul id="sortable2" class="connectedSortable"><b>Right side</b>
  <!--<?php echo $column2; ?>-->
  <li id="entry_4" class="ui-state-default">Entry #4</li>
  <li id="entry_5" class="ui-state-default">Entry #5</li>
  <li id="entry_6" class="ui-state-default">Entry #6</li>
</ul>

jQuery

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',

        update: function (event, ui) {
            var order = $(this).sortable('serialize');

            $(document).on("click", "#save", function () 
            { 
                $.ajax(
                {
                    //data: order,
                    //data: $("#sortable").sortable("serialize"),
                    type: 'POST',
                    url: 'draggable.php',
                    data: 
                    {
                        sort1:$("#sortable1").sortable('serialize'),
                        sort2:$("#sortable2").sortable('serialize')
                    },
                    success: function(html)
                    {
                        //$('.success').fadeIn(500);
                    }
                });
            });
        }


    }).disableSelection();
    $('#save').on('click', function () {
        var r = $("#sortable1, #sortable2").sortable("toArray");
        var a = $("#sortable1, #sortable2").sortable("serialize", {
            attribute: "id"
        });
        console.log(r, a);
    });
});

点击保存按钮后数据应保存到数据库中。

但是我当前在此页面上的演示存在问题。

我们可以拖放，但数据不能保存到数据库。 javascript 函数保存或 ajax 更新中可能缺少某些内容。

备注：关于项目自动保存对我来说没有问题我们有问题只能通过保存按钮保存你可以在这里看到 jsfiddle.net/verawat/7cu6vtqf/3

我尝试在 jsfiddle 上添加 Demo 示例，如下所示。

1. Drag&Drop Connected Sortable Auto Save (Good job. No have Problem)

2. Drag&Drop Connected Sortable Save by onClick Button Save (This is my problem)

Answer 1

第一次发生更新时，您不会发送任何 AJAX 请求，只是添加事件处理程序。

您不应在其他事件处理程序中添加事件处理程序。你的代码应该是这样的：

$(function() {
  function sendRequest() {
    $.ajax({
      type: 'POST',
      url: 'draggable.php',
      data: {
        sort1: $("#sortable1").sortable('serialize'),
        sort2: $("#sortable2").sortable('serialize')
      },
      success: function(html) {
        //$('.success').fadeIn(500);
      }
    });
  }

  $("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable',
    update: sendRequest
  });

  $(document).on("click", "#save", sendRequest)
});