AJAXで簡単にドラッグ&ドロップで順番を変更する方法[webの話] | おむすび

AJAXで簡単にドラッグ&ドロップで順番を変更する方法[webの話] | おむすび

AJAXで簡単にドラッグ&ドロップで順番を変更する方法

webの話


どうもおむすび17号です。
今回はドラッグ&ドロップで順番変更を行い、
確定ボタンなどなしで、順番を変更したら既に
サイトも更新されているといった方法を解説いたします。

これを実装するにはDBが必要です。

DB上でテーブルに順番を決めるカラムを用意します。

 

そのカラムに番号を振り分けていく事で順番をソート出来るようにします。

例えば(table_sample)

(id,name,sort_no)

 

このsort_noに番号を入れます。

SELECTで抽出する際にはこれを軸に抽出してください。

 

まずは下記を入れます。

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function(){
  $('#sort').sortable({
    update: function() {
        
      var ids = $(this).sortable('toArray').toString();
      console.log( ids );

    $.post("sort.php", {
      ids:ids
    },function(json){
     
    });
      
    }
  });
});
</script>

 

 

上記は#sortにあるidを,をはさんで送信します。

なので下記のような内容をHTML上に入れます。

 

 

<ul id="sort">
    <li id="1">りんご</li>
    <li id="2">みかん</li>
    <li id="3">もも</li>
    <li id="4">ぶどう</li>
    <li id="5">いちご</li>
</ul>

 

 

現在はHTMLで書いていますが

SELETでDBから出力してもらうとわかりやすいかと思います。

 

ここでマウスを操作し順番を入れ替えると

その情報がsort.phpに行きます。

 

sort.phpを作成し中身を以下にしてください。

 

$ids = $_POST["ids"];
$ids_list = explode(",", $ids);
$cunt = count($ids_list);

$num = 0;
$num_no = 1;

while ($num <= $cunt){


$result = $ids_list[$num];    
$sql_db  = "UPDATE table_sample";
$sql_db .= " SET";
$sql_db .= " sort_no=?";
$sql_db .= " WHERE";
$sql_db .= " id=?";

$sqldb_join = $dbh->prepare($sql_db, array('text','text'));
$sqldb_join->execute(array($num_no,$result));
$num = $num+1;    
$num_no = $num_no+1;

}

 

 

idは個別番号です。

それを配列化します。

 

そしてwhileで回転さして現在の順番を

UPDATEしていきます。

 

これでsort_noには順番が入りました。

後はselectでasc表示すると順番が変わって表示されます。

 

DBにダイレクトに書き換えを行いますので

管理画面で変更するとサイトでもダイレクトに変更出来ているという事になります。

 

是非導入してみてください!

ではでは

 

 



大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。



更新日:2016-09-20

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

1分で出来る簡単にランダムバナーを設置する方法「jQuery」
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!
スマホ投稿にも使えるWYSIWYGエディッタsummernote
他社サイトのアクセス数などが分かるサービス

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

AJAXで簡単にドラッグ&ドロップで順番を変更する方法

webの話




どうもおむすび17号です。
今回はドラッグ&ドロップで順番変更を行い、
確定ボタンなどなしで、順番を変更したら既に
サイトも更新されているといった方法を解説いたします。

これを実装するにはDBが必要です。

DB上でテーブルに順番を決めるカラムを用意します。

 

そのカラムに番号を振り分けていく事で順番をソート出来るようにします。

例えば(table_sample)

(id,name,sort_no)

 

このsort_noに番号を入れます。

SELECTで抽出する際にはこれを軸に抽出してください。

 

まずは下記を入れます。

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function(){
  $('#sort').sortable({
    update: function() {
        
      var ids = $(this).sortable('toArray').toString();
      console.log( ids );

    $.post("sort.php", {
      ids:ids
    },function(json){
     
    });
      
    }
  });
});
</script>

 

 

上記は#sortにあるidを,をはさんで送信します。

なので下記のような内容をHTML上に入れます。

 

 

<ul id="sort">
    <li id="1">りんご</li>
    <li id="2">みかん</li>
    <li id="3">もも</li>
    <li id="4">ぶどう</li>
    <li id="5">いちご</li>
</ul>

 

 

現在はHTMLで書いていますが

SELETでDBから出力してもらうとわかりやすいかと思います。

 

ここでマウスを操作し順番を入れ替えると

その情報がsort.phpに行きます。

 

sort.phpを作成し中身を以下にしてください。

 

$ids = $_POST["ids"];
$ids_list = explode(",", $ids);
$cunt = count($ids_list);

$num = 0;
$num_no = 1;

while ($num <= $cunt){


$result = $ids_list[$num];    
$sql_db  = "UPDATE table_sample";
$sql_db .= " SET";
$sql_db .= " sort_no=?";
$sql_db .= " WHERE";
$sql_db .= " id=?";

$sqldb_join = $dbh->prepare($sql_db, array('text','text'));
$sqldb_join->execute(array($num_no,$result));
$num = $num+1;    
$num_no = $num_no+1;

}

 

 

idは個別番号です。

それを配列化します。

 

そしてwhileで回転さして現在の順番を

UPDATEしていきます。

 

これでsort_noには順番が入りました。

後はselectでasc表示すると順番が変わって表示されます。

 

DBにダイレクトに書き換えを行いますので

管理画面で変更するとサイトでもダイレクトに変更出来ているという事になります。

 

是非導入してみてください!

ではでは

 

 



大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。



更新日:2016-09-20
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

サイト内のどのボタンを押したか計測する方法
あなたのアナリティクス 正確なデータとれていないかも
l.instagram.com / referral ってなんだろう
KPI・KSF・KGIをすっごく簡単に解説
もしかしてWebの書き出し、まだpng…!?
CSS Nite in OSAKA In-house SEO Meetup 参加予定


人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ