javascript - 使用 PHP、拖放操作将排序首选项保存到 MySQL

Question

我正在使用 JQuery 为我的用户提供一个可重新排列的项目列表。像这样:

Image of List

这是简单的 HTML:

      <ul class="sortable">
      <li>Item 1<i class="sorthandle"></i></li>
      <li>Item 2<i class="sorthandle"></i></li>          
      </ul>

拖放功能非常有用。下一步是将用户的排序偏好保存到数据库中。我计划在我的数据库中添加一个“优先级”列，该列将包含一个表示用户首选排序顺序的整数。然后我的查询将 Order by 'priority' ASC。

我想我需要生成一个当前显示在拖放屏幕上的排序顺序的数组，然后将这些值保存到数据库记录中。但是作为一个 JavaScript 新手，我需要一些帮助。

我的 JavaScript

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".sortable").sortable({
    connectWith: ".sortable",
    handle: '.handle'
  }).disableSelection();

});
</script>

通过 PHP 生成拖放列表:

while ($row = mysqli_fetch_array($result)){
  $playlistname = $row['name'];
  $id = $row['id'];
  echo "<li>$playlistname<i class='handle fa fa-bars'></i></li>";

}

Answer 1

首先，JavaScript 需要 ID，而不仅仅是名称。您可以简单地将它们放在数据属性中(我也去掉了不必要的变量赋值，并通过连接构建了字符串)

echo '<li data-id="' . $row['id'] . '">' . $row['name'] . '<i class="handle fa fa-bars"></i></li>';

然后您可以在 JavaScript 中提取此数据属性并创建一个数组。您可能需要考虑何时保存设置。最简单的方法是提供一个按钮。您也可以在 sortable update 上执行此操作事件(例如在“删除”元素之后)。但这是有风险的，可能会使您的服务器重载。

要在单击按钮时触发 AJAX POST，请将此代码放在 $(function() { 中.它在 click 上绑定(bind)了一个 lambda 函数ID 为 save 的 DOM 元素的事件，例如。 <button id="save">save order</button>

// bind a callback to the button click
$('#save').on('click', function () {
    // array where we store the IDs
    var ids = [];
    // loop through the <li> and extract data-id
    $('.sortable li').each(function() {
        ids.push($(this).data('id'));
    });

    // AJAX POST the array to a PHP script
    $.post('/savescript.php', {'ids[]': ids});
});

然后您可以访问 $_POST['ids'] 中的数据.