Question

早上好！

我有一个（我认为）基本的Html - PHP问题，经过数小时的尝试，我似乎无法做对。

我有一个页面，使用JqueryUI gridsort。在页面上，用户可以将图片从PC上传到他们的网络文件夹。然后在拖放内部对图片进行反射。

对于每个上传的图像，我这样做（我确实已经宣布避免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，希望这会有所帮助。

我的问题是 - 如何返回列表的顺序，以便我可以处理它。（i.E pro 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和图像标记

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脚本中的图像时，根据图像标识设置订单

有序列表和PHP

2 个答案: