index.php中 var autoSave = false; 控制不自动提交。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?php static $connect = null; static $table = ''; if(!isset($connect)) { $connect = mysql_connect("localhost","root",""); if(!$connect) { $connect = mysql_connect("localhost","Zjmainstay",""); } if(!$connect) { die('Can not connect to database.Fatal error handle by /test/db.php'); } mysql_select_db("test",$connect); mysql_query("SET NAMES utf8",$connect); $conn = &$connect; $db = &$connect; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?php require 'db.php'; $fromid = $_POST['fromid']; $fromorder = $_POST['fromorder']; $toorder = $_POST['toorder']; $updateorder = $toorder; $eqf = ''; $eqt = '='; $symbol = '-'; $notZero = 'AND `order`>1'; if($fromorder > $toorder){ $eqf = '='; $eqt = ''; $symbol = '+'; $fromorder = $toorder; $toorder = $_POST['fromorder']; $updateorder = $fromorder; $notZero = ''; } mysql_query("START TRANSACTION",$conn); $query = "UPDATE `limove` SET `order`=`order`{$symbol}1 WHERE (`order`>{$eqf}{$fromorder} AND `order`<{$eqt}{$toorder} {$notZero})"; $return1 = mysql_query($query,$conn); $query = "UPDATE `limove` SET `order`={$updateorder} WHERE `id`={$fromid}"; $return2 = mysql_query($query,$conn); if($return1&$return2){ mysql_query("COMMIT",$conn); }else { mysql_query("ROLLBACK",$conn); } $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); while($li = mysql_fetch_assoc($lis)){ echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>'; } exit(0);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?php require 'db.php'; $data = explode(',',$_POST['data']); mysql_query("START TRANSACTION",$conn); $return = 1; foreach($data as $order => $id){ $order++; $query = "UPDATE `limove` SET `order`={$order} WHERE `id`={$id}"; $return = mysql_query($query,$conn)&$return; } if($return){ mysql_query("COMMIT",$conn); }else { mysql_query("ROLLBACK",$conn); } $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); while($li = mysql_fetch_assoc($lis)){ echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>'; } exit(0);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?php require 'db.php'; mysql_query("UPDATE limove SET `order`=`id`"); $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); while($li = mysql_fetch_assoc($lis)){ echo '<li id="'.$li['id'].'" order="'.$li['order'].'">'.$li['name'].'</li>'; } exit(0);
jquery-1.6.2.min.js文件下载: jquery-1.6.2.min.js
软件包下载:下载
目录包含文件,如下图:
程序运行后界面: