jquery 拖拽排序 ajax后台记录
一。index.php文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-1.6.js"></script>
<script language="javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" >
$(document).ready(function(){
<?php mysql_connect("localhost","admin","1123581321");
mysql_query("set names utf8");
mysql_select_db("mytest");
$result=mysql_query("SELECT * FROM `user` WHERE name = 'breakhappy'");
$result=mysql_fetch_row($result);
$result=$result[1];
$result=trim($result);
?>
var p=<?php echo "'$result'"?>; //取得数据库中记录顺序的字段，将其赋值给js变量p
ss = p.split(","); //js切割字符串数组
for( var i in ss){
ss[i]=parseInt(ss[i])
} //使字符串数组转化为整形
for(var i in ss){
var k=ss[i]
k="#"+ss[i]
$(k).remove().appendTo("ul")
}
// sortable jquery排序插件
$( "ul" ).sortable({
update:function(){
var array = [];
$("ul").children("li").each(function() {
array.push(this.id);
}); //array确定顺序的字符串
newid = array.join(','); //转化为字符串数组传给后台
$.get("ajx.php",{name:newid}) //ajax
}
})
})
</script>
<title>无标题文档</title>
<style type="text/css">
ul{ position:relative; list-style:none; margin:0px 0px; padding:5px;}
ul li{ border:1px solid red; margin-bottom:5px;}
</style>
</head>
<body>
<ul>
<li id="0" title="0" value="21">这是第一个元素</li>
<li id="1" title="1">这事第二个元素</li>
<li id="2" title="2">这事第三个元素</li>
<li id="3" title="3">这是第四个元素</li>
<li id="4" title="4">只是第五个元素</li>
</ul>
</body>
</html>
二 ajax.php文件
<?php
mysql_connect("localhost","admin","1123581321");
mysql_query("set names utf8");
mysql_select_db("mytest");
$name=$_GET["name"];
$name=trim($name);
mysql_query("UPDATE `mytest`.`user` SET `sort` = '$name' WHERE `user`.`name` = 'breakhappy';");
echo $name;
?>
目前就这样，因为css的原因在布局结构上有一定的局限性，稍后研究一下流体布局
浙公网安备 33010602011771号