一個額外的領域photo_ord]添加到您的數據庫表Image_Order
創建圖像列表
<li class="left" id="someId">
<a href="#" >
<img src="image path here" alt="error" id="image_id_here" class="img_thumb"/>
</a>
</li>
功能處理器(它會調用時的任何圖像將移動)
<a href="#" onclick="change_order()" class="btn_1">Save Order</a>
功能讓阿賈克斯呼籲更新圖片 - 訂單
function change_order()
{
var urlst="";
var co=1;
$('.img_thumb').each(function()
{
urlst=urlst+this.id+'#'+co+'*';
co++;
});
$.ajax(
{
type:"POST",
url:"xhr_change_image_order.php",
data:"orader="+urlst,
success:function(data)
{
if(data=="changed")
alert("Image order changed.");
},
error:function()
{
alert('error occure');
}
});
}
文件:xhr_change_image_order.php(將更新數據庫)
<?php
$url = $_POST['orader'];
$photo_arr = explode("*", $url);
foreach ($photo_arr as $k => $ph) {
if (strlen($ph) > 1)
{
// Update Query
// $arr[0] will contain image id
// $arr[1] will contain image order
UPDATE `photo` SET `photo_ord` = $arr[1] WHERE `photo_id` = $arr[0];
}
}
echo "changed";
?>
之後,當創建相冊只需用獲取訂單數據BY子句
SELECT * FROM photo ORDER BY photo_ord asc or DESC