var AutoSave = False in index.php; Control does not automatically commit.
<?php
Require ' db.php ';
$query = "Select ' id ', ' order ', ' name ' from ' Limove '";
$lis = mysql_query ($query, $conn);
$li _count = mysql_num_rows ($lis);
?>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>li move</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<meta name= "Keywords" content= ""/>
<meta name= "Description" content= ""/>
<script type= "Text/javascript" src= "Jquery-1.6.2.min.js" ></script>
<body>
<style>
ul{
border:1px solid red;
height:150px;
Margin:auto;
width:745px;
}
li{
border:1px solid #AABBCC;
Float:left;
List-style:none outside none;
margin:10px;
Text-align:center;
width:120px;
Cursor:move;
}
#reset {
border:1px solid #AABBCC;
Cursor:pointer;
Float:right;
height:20px;
padding:2px;
width:40px;
}
#save {
border:1px solid #AABBCC;
Cursor:pointer;
Float:right;
height:20px;
padding:2px;
width:40px;
}
</style>
<div id= "Reset" >Reset</div>
<div id= "Save" >Save</div>
<ul>
<?php
while ($li = Mysql_fetch_assoc ($lis)) {
Echo ' <li id= '. $li [' id ']. ' order= '. $li [' Order ']. ' " > '. $li [' name ']. ' </li> ';
}
?>
</ul>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("ul"). CSS ({height:<?php echo (ceil ($li _COUNT/5) *40+10));
var on_move_li = ';
var on_move_li_offset = ';
var on_move_li_index = ';
var autoSave = false;
function bindmovelistening () {
$ ("Li"). MouseDown (function () {
On_move_li_offset = $ (this). offset ();
On_move_li = $ (this);
On_move_li_index = On_move_li.prevall (). length;
if (On_move_li_index = = 0) var index = 1;
else var index = On_move_li_index;
Create an empty Li
$ ("ul"). Children ("Li"). EQ (index-1)-After (' <li class= dashed "style=" border:1px dashed #AABBCC "> </li>")
On_move_li.addclass (' moving '). CSS ({left:on_move_li_offset.left,top:on_move_li_offset.top,position: ' absolute ', ' Z-index ': 3,border: ' 1px dashed #AABBCC '});
$ ("ul"). MouseMove (function (e) {
if ($ (this). Find (". Moving"). Length!= 0) {
var ClientX = e.clientx-60;
var ClientY = e.clienty-20;
On_move_li.css ({left:clientx,top:clienty});
}
});
$ ("ul"). MouseUp (function (e) {
if ($ (this). Find (". Moving"). Length!= 0) {
var ClientX = E.clientx;
var ClientY = E.clienty;
var times = Math.floor ((clienty-(ON_MOVE_LI_OFFSET.TOP+10))/42);
var index = (times*5) + (Math.floor (clientx-(on_move_li_offset.left+50)/120) +on_move_li_index);
if (Index > <?php echo $li _count?>) index = <?php echo $li _count?>;
On_move_li.attr (' class ', null). attr (' style ', null);
$ (". Dashed"). Remove ();
var fromid = on_move_li.attr (' id ');
var fromorder = on_move_li.attr (' order ');
var Toorder = $ ("ul"). Children ("Li"). EQ (Index)-attr (' order ');
if (index = = On_move_li_index && index>0) index = index-1;
if (on_move_li_index = 0 && (index = = -1| | index = = 0) $ ("ul"). Children ("Li"). EQ (1). before (On_move_li);
else if (index = = 1) $ ("ul"). Children ("Li"). EQ (0). before (On_move_li);
else $ ("ul"). Children ("Li"). EQ (Index)-After (On_move_li);
if (AutoSave) {
$.ajax ({
URL: ' limove_process.php ',
Type: ' POST ',
data:{' Fromid ': fromid, ' fromorder ': Fromorder, ' Toorder ': Toorder},
Success:function (NewData) {
$ ("ul"). Empty (). append (NewData);
Bindmovelistening ();
}
});
}
}
});
});
$ ("#reset"). Click (function () {
$.ajax ({
URL: ' limove_reset.php ',
Type: ' POST ',
Success:function (NewData) {
$ ("ul"). Empty (). append (NewData);
Bindmovelistening ();
}
});
});
$ ("#save"). Click (function () {
var data = ';
var lis = $ ("ul"). Children ("Li");
$.each (Lis,function (i) {
Data + + LIS.EQ (i) attr (' id ') + ', ';
});
$.ajax ({
URL: ' limove_save.php ',
Type: ' POST ',
data:{' data ':d ata.substr (0,data.length-1)},
Success:function (NewData) {
$ ("ul"). Empty (). append (NewData);
Bindmovelistening ();
}
});
});
}
Bindmovelistening ();
});
</script>
</body>
