JQ
index.php中 var autoSave = false; 控制不自动提交。
index.php
<? 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>
<? 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>
db.php
<? 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 ;
}
<? 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 ;
}
自动提交处理文件 limove_process.php
<? 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);
<? 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);
保存按钮处理文件 limove_save.php
<? 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);
<? 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);
重置按钮处理文件 limove_reset.php
<? 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);
<? 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
软件包下载： 下载
目录包含文件，如下图：
程序运行后界面：
作者： Zjmainstay
出处： http://www.cnblogs.com/Zjmainstay/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息
分类: PHP 札记 , 小功能应用集锦
标签: php , jQuery , li
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48408