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
[ 認証画像を変える ]

関連記事

情報量が多いページから一瞬で知りたい情報を見つける方法
l.instagram.com / referral ってなんだろう
自分で出来る！MEO(ローカルSEO)でやっておくべきこと6つ
SEOの時代は終わり？店舗型に向いていると思うweb集客
もしかしてWebの書き出し、まだpng…!?
SEOはシンプルに考えるべき！絶対外せない重要な事３つ！

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました！
雨の野外フェスで用意しておきたいもの



ブログ

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

[ 認証画像を変える ]


関連記事

アナリティクスで電話番号タップをコンバージョン計測する方法
CSS Nite in OSAKA In-house SEO Meetup 参加予定
スマホ投稿にも使えるWYSIWYGエディッタsummernote
「ブログを書こう」って言う業者おおすぎ
もしかしてWebの書き出し、まだpng…!?
１分で出来る簡単にランダムバナーを設置する方法「jQuery」

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました！
雨の野外フェスで用意しておきたいもの

ブログ