<?php
require 'db.php';
$query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
$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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<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;
//创建空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':data.substr(0,data.length-1)},
success:function(newdata){
$("ul").empty().append(newdata);
bindMoveListening();
}
});
});
}
bindMoveListening();
});
</script>
</body>
</html>
