Question

我正在使用http://farhadi.ir/projects/html5sortable/

中的可排序javascript

该脚本对我来说很好，但是当我没有javascript的知识时，如何创建代码以在移动图片时使用新订单在php中获取数组是一个问题。

我现在使用的代码：

<section>
<ul class="sortable grid">

    <?php
    $i=1; 

    foreach ($werkbladen as $werkblad) {

        $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];

        echo '<li id = "'.$i.'"><img src="'.$thumbnail.'" width="139" height="181" /></li>';

        $i++;
    }
    ?>

</ul>
</section>

<script>
$('.sortable').sortable().bind('sortupdate', function() {

    //Triggered when the user stopped sorting and the DOM position has changed.

    // i will need here the code in javascript that creates a new array in php with the new order

});
</script>

我希望有人可以帮我解决这个问题。

也许更多的解释也会有所帮助：这就是我的session_array的样子

Array
(
[0] => Array
    (
        [werkblad] => Array
            (
                [id] => 1105
                [database] => 1111
                [path] => groep12/1111
                [thumbnail] => mensen-kleding-03.jpg
                [bestand] => 
            )

    )

[1] => Array
    (
        [werkblad] => Array
            (
                [id] => 5639
                [database] => 1111
                [path] => groep12/1111/1111/
                [thumbnail] => mensen-kleding-1-minder-en-1-meer.jpg
                [bestand] => mensen-kleding-1-minder-en-1-meer.pdf
            )

    )

[2] => Array
    (
        [werkblad] => Array
            (
                [id] => 72
                [database] => 1111
                [path] => groep12/1111/
                [thumbnail] => passieve-woordenschat-02.jpg
                [bestand] => passieve-woordenschat-02.pdf
            )

    )

)

我需要的是带有排序图像的数组。该数组将被发送到一个php文件，从它创建一个pdf，所以我将需要所有的信息作为原始信息。

亲切的问候， Sietsko

Answer 1

我总是发现，如果我可以避免将JavaScript用于任务，那么通常会付出代价。至少在开始时，因为这意味着您的系统可以被更多人使用。禁用脚本后备功能在可访问性方面具有优势，通常有助于指导您构建坚持可靠，易于理解的基线的应用程序。

我假设你知道PHP，你也会很好地理解HTML。

非JavaScript解决方案

基本上你需要做的只是一个简单的解决方案是将隐藏的输入作为可排序标记的一部分。这些输入必须以无索引数组表示法命名，即name="row[]"，以便在服务器端呈现数据时遵守HTML顺序。

然后，输入将负责保存存储在HTML中的有意义的信息。您可以使用PHP的serialize()或json_encode()来处理复杂的值，或者 - 如果您可以在服务器端（即数据库或会话）中以集合或列表的形式访问数据，那么它将是 *首选仅存储唯一ID。

然后隐藏的输入将与HTML的其余部分一起排序。

*首选：为什么只存储ID会更好？您不仅可以使用简单的ID发送更少的数据，而且如果您最终遇到恶意用户，则可能会发生更少的干扰。可能会尝试将不需要的信息发布到您的服务器的人。您应该始终测试并清除从外部接收到的数据到服务器，这在处理简单的数组键偏移时更容易 - 而不是复杂的数据结构。

对您已经拥有的内容略有改动

为了使其正常工作，您需要使用表单标记和 **提交按钮包装可排序列表，或至少触发表单提交的一些号召性用语。然后，当调用submit时 - 根本不需要利用JavaScript - 表单的目标将以正确的顺序接收您的数据。

<form id="sorted" action="destination.php" method="post">
<section>
<ul class="sortable grid">
  <?php
  $i=1; 
  foreach ($werkbladen as $werkblad) {
    $thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];
    /// I've used thumbnail as my stored data, but you use `$i` or anything you want really.
    $input = '<input type="hidden" name="row[]" value="' . $thumbnail . '" />';
    $image = '<img src="' . $thumbnail . '" width="139" height="181" />';
    echo '<li id="'.$i.'">' . $input . $image . </li>';
    $i++;
  }
  ?>
</ul>
</section>
</form>

**提交按钮：如果我要生成PDF，我不会在每次排序事件后触发它。您真的希望用户通过号召性用语请求，因为PDF生成通常是非常繁重的过程。更不用说如果用户尚未完成 ***订购，您会浪费带宽和处理时间。

然后在PHP端，您将使用以下方式获取行信息：

$_POST['row']; // <-- this should be a sorted array of thumbnail paths.

***订购：是的，您可以在sortupdate事件上设置超时延迟，以便在每次排序后都不会触发。但我实施号召性用语的原因不仅仅是基于最小化服务器必须完成的工作。默认情况下，实施号召性用语是一个好主意，然后逐渐将其隐藏起来，供不想要或不需要它的用户使用。

逐步增强

如果你真的想要一个最新的排序交互预览，那么我仍然会实现上面的HTML解决方案，但是逐步增强JavaScript以增加额外的能力。您可以使用已经评论过的AJAX / $sortable解决方案来执行此操作。但是因为你现在有一个表单，你可以使用jQuery的.serialize()方法。这旨在获取一个表单并生成它将作为一组名称 - 值对提交的数据。然后可以通过多种方式将此“URL”字符串发布或GET回服务器。

$('.sortable').sortable().bind('sortupdate', function() {
  var data = jQuery('form#sorted').serialize();
  console.log(data);
  /// there are a number of ways you can use this data
  /// send it via AJAX, open a new tab, open a pop-up window,
  /// open a preview iframe... even encode it using semaphore
  /// and create a canvas animation of waving flags.
});

Answer 2

您可以在JavaScript中执行以下操作：

var $sortable = $('.sortable');
$sortable.sortable().bind('sortupdate', function() {
    //Find all list items and retrieve the id's
    var ids = $sortable.find('li').map(function(idx, item){
        return item.id        
    }).toArray();
    //Post the array to the php page
    document.location.href = 'post.php?array=' + JSON.stringify(ids);
});

在PHP文件中

json_decode($_GET['array'])

检查这个小提琴，看看实际使用的JavaScript：

使用sortable.js时如何在php中获取新数组

2 个答案:

非JavaScript解决方案

对您已经拥有的内容略有改动

逐步增强

jsfiddle