基尼而絲(G.N.A.S)的大世界

排序首頁

<script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>

<ul id="sortlist">
<?php
$conn=mysqli_connect('localhost','root','','test');
$result = mysqli_query($conn,"SELECT * FROM drag order by sorting asc");

while($row = mysqli_fetch_array($result)) {
$id=$row['id'];
$sorting=$row['sorting'];
$name=$row['name'];
echo <<<EOD
<li class='ui-state-default' id='listfield_{$id}'>{$name}</li>
EOD;
}
?>
</ul>

jQuery

$(function() {
　$("#sortlist").sortable({
　　update : function () {
　　　var order = $('#sortlist').sortable('serialize');
　　　$("#message").load("1.php?"+order);
　　}
　});
});

PHP

<?
$conn=mysqli_connect('localhost','root','','test');

$listfield=$_GET['listfield'];
$i=0;
foreach ($_GET['listfield'] as $order => $id){
　mysqli_query($conn,"UPDATE `drag` SET `sorting` = $i WHERE `id` = $id");
　++$i;
}
mysqli_close($conn);
echo 'ok';
?>

MySQL

-- 資料表格式： `drag`
--

CREATE TABLE `drag` (
`id` int(11) unsigned NOT NULL auto_increment,
`name` varchar(20) NOT NULL,
`sorting` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

--
-- 列出以下資料庫的數據： `drag`
--

INSERT INTO `drag` VALUES (1, 'jon', 1);
INSERT INTO `drag` VALUES (2, 'Pears', 0);
INSERT INTO `drag` VALUES (3, 'Oranges', 2);