1

早上好！

我有一个（我认为）基本的 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，希望这会有所帮助。

我的问题是 - 我怎样才能返回列表的顺序以便我可以处理它。(iE ill probalby put into SQL, or most likely XML.)

谢谢！

4

2 回答 2

1

你的意思是这样的？

Jquery - 可排序（更新时使用序列化顺序进行 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>
于 2013-07-18T14:51:51.743 回答
1

简单的答案是循环遍历 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 设置顺序

于 2013-07-18T14:58:10.563 回答