基於jQuery實現的百度導航li拖放排列效果，即時更新資料庫_jquery

index.php中 var autoSave = false; 控制不自動提交。
index.php

複製程式碼 程式碼如下:

require 'db.php';
$query = "從`limove` ORDER BY `order` 選擇`id`,`order`,`name`";
$lis = mysql_query($query,$conn);
$li_count = mysql_num_rows($lis);
？ >




>




頭>


ul{
邊框：1px 純紅;
高度：150px;
邊距：自動；
寬度：745px;
}
li{
邊框：1px 實線#AABBCC;
浮動：左；
列表樣式：無外無；
邊邊>邊浮距：10px;
文字對齊：居中；
寬度：120px;
遊​​標：移動；
}
#reset{
邊框：1px 實心#AABBCC；
； ：指針；
浮動：右；
高度：20px;
內邊距：2px;
寬度：40px;
}
#save{
邊框：1px 實心：1px #AABBCC；
遊​​標：指針；
浮動：右；
高度：20px;
內邊距：2px;
寬度：40px;
}
>>寬度：40px;
}
>

重置

儲存

;

;
while($li = mysql_fetch_assoc($lis)){
echo '
• '.$li['name'].'
';
}
？ >

$(document).ready(function(){
$("ul").css({height: } );
var on_move_li = '';
var on_move_li_offset = '';
var autoSave = false
函數bindMoveListening(){
$( "li").mousedown(function(){
on_move_li_offset = $(this).offset();
on_move_li = $(this);
on_moveli_index =on_move .prevAll().length;
if(on_move_li_index == 0) var index = 1;
else var index = on_move_li_index;
//建立空li
$("ul").ren; ("li").eq(index -1).after('

 

')
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(".movi​​ng").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 ($("ul").mouseup(function(e){
if ( $(this).find(".movi​​ng").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_liove_li_offset.left 50))/120) on_move_li_index); >if(index > ) index = ;
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',
類型:'POST',
資料:{' fromid':fromid,'fromorder ':fromorder,'toorder':toorder},
success:function(newdata){
$("ul").empty().append(newdata)
bindMoveListening (); }
});
}
}
});
});
$("#reset").click(function(){
$.ajax({
url:'limove_reset.php',
類型:'POST',
成功: 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();
});
腳本>
身體>



db.php

複製程式碼 程式碼如下:

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

複製代碼


代碼如下:


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`{$symbol}1 WHERE (`order`>{$eqf}{$fromorder} AND `order`$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['name'].'

';

}

exit(0);


儲存按鈕處理檔案limove_save.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['name'].'

'; }

exit(0);

重設按鈕處理檔案limove_reset .php




複製程式碼


程式碼如下:

require. 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['name'].'

';

} exit(0);

jquery-1.6.2.min.js檔案下載：

jquery-1.6.2.min.js

軟體包下載：
limove_jb51.rar軟體包下載：limove_jb51.rar軟體包下載：limove_jb51.rar軟體包下載：limove_jb51.rar軟體包下載：limove_jb51.rar軟體包下載> 目錄包含文件，如下圖： 程式運行後介面： 作者：Zjmainstay　　　　 出處：http://www.cnblogs.com/Zjmainstay/