Baidu ナビゲーション li ドラッグ アンド ドロップ配置効果 jQuery に基づいて、データベースをリアルタイムで更新_jquery

var autoSave = false;index.php で自動送信を制御します。
index.php

コードをコピー コードは次のとおりです:

「db.php」が必要です。
$query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`";
$lis = mysql_query($query,$conn);
$li_count = mysql_num_rows($lis);
?>












ul{
border: 1 ピクセルの赤一色。
高さ: 150px;
マージン: 自動;
幅: 745px;
}
li{
ボーダー: 1px 実線 #AABBCC;
フロート: 左;
リストスタイル: 外側にはなし、なし。
マージン: 10px;
text-align: 中央;
幅: 120px;
カーソル: 移動;
}
#reset{
ボーダー: 1px 実線 #AABBCC;
カーソル: ポインタ;
フロート: 右;
高さ: 20px;
パディング: 2px;
幅: 40px;
}
#save{
ボーダー: 1px 実線 #AABBCC;
カーソル: ポインタ;
フロート: 右;
高さ: 20px;
パディング: 2px;
幅: 40px;
}

リセット

保存

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

db.php

コードをコピー コードは次のとおりです。

static $connect = null;
static $table = '';
if(!isset($connect)) {
$connect = mysql_connect("localhost","root"," ");
if(!$connect) {
$connect = mysql_connect("localhost","Zjmainstay","");
}
if(!$connect) {
die(' データベースに接続できません。/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']; ;
$eqf = '';
$eqt = '=';
$notZero = 'AND `order`>
($fromorder > $toorder ){
$eqf = '=';
$symbol = ' ';
$fromorder = $toorder; toorder = $_POST['fromorder '];
$updateorder = $fromorder;
}
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`"; 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 'db.php'; mysql_query("UPDATE limove SET `order`=`id`"); 🎜>$query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); li = mysql_fetch_assoc($lis)){ echo '

' .$li['name'].'< /li>'; } exit(0);

jquery-1.6.2.min.js ファイルのダウンロード:
jquery-1.6.2.min.js

ソフトウェア パッケージのダウンロード:
limove_jb51.rar

ディレクトリには、以下に示すファイルが含まれています。

プログラム実行後のインターフェース:
著者: Zjmainstay 出典: http://www.cnblogs.com/Zjmainstay/