订购清单和PHP

Question

早上好！

我有一个（我认为）基本的HTML-PHP问题，经过数小时的尝试，我似乎无法正确理解。

我有一个页面，使用JqueryUI gridsort。 在页面上，用户可以将图片从PC上载到Web文件夹。 然后将图片放在拖放UL中。

对于上传的每个图像，我都这样做（我确实将UL声明为避免，并在下面关闭）

    $imgID++;


echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';

这将根据上传的文件数量创建拖放图片，并允许他们可视化地重新组织它们。 按左上至右下的顺序。 我想做的是能够返回图像的顺序。我玩了$ imgID ++，为每个图像分配了一个ID，希望能帮上忙。

我的问题是-如何返回列表的顺序，以便可以处理它。 （即病态的probalby放入SQL或最有可能的XML中。）

谢谢！

Answer 1

你的意思是这样的吗？

jQuery-可排序的（在更新时，以serialiaze顺序进行ajax调用）

$(document).ready(function() {
    $("#lista-prova").sortable({
      handle : '.trascinabile',
      update : function () { 
        var ordina = $('#lista-prova').sortable('serialize');
        $("#info").load("riordinamento.php?"+ordina);
      }
    });
});

这是更新的PHP代码

<?php
foreach ($_GET['oggettoItem'] as $position => $item) :
    $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
endforeach;

print_r ($sql);
?>

这是可排序项目的html

<div id="info">In attesa di aggiornamento post-riordinamento</div>
<div id="lista-prova">
    <li id="oggettoItem_1"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 1</strong></li>
    <li id="oggettoItem_2"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 2</strong></li>
    <li id="oggettoItem_3"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 3</strong></li>
    <li id="oggettoItem_4"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 4</strong></li>
</div>

Answer 2

简单的答案将是遍历ul中的图像，假设列表中除了li和image标签之外没有其他内容

var listofIDs = [];
$('ul li').each(function(){
    listofIDs.push($(this).find('img').prop('id));
});
$.ajax{[
    url:'example.com',
    data: {'list':listofIDs},
    type: 'post'
]}.done(function(msg){alert(msg);});

另外，您应该使用数据库idnum作为ID，而不仅是增量器，因此它很容易进行列更新。 创建一个名为image_order的列，并在ajax脚本中更新图像时，根据图像ID设置顺序