Question

根据测试Drag＆amp; Drop元素，左侧为sortable1，右侧为sortable2，右侧为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函数save或ajax update中出错。

备注：关于项目自动保存对我没有问题我们有问题只保存按钮你可以在这里看到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)
});

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

1 个答案: