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

関連記事

(direct) / (none) が急に増えた!
アナリティクスを登録する際に絶対しておきたい3つのこと
KPI・KSF・KGIをすっごく簡単に解説
アドワーズの仕様変更でキーワードプランナーが悲しいことに…
情報量が多いページから一瞬で知りたい情報を見つける方法
スマホ投稿にも使えるWYSIWYGエディッタsummernote

人気記事

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



ブログ

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

[ 認証画像を変える ]


関連記事

SEO Meetupに参加してわかったSEOに大切な5つの事
アナリティクスを登録する際に絶対しておきたい3つのこと
サイト内のどのボタンを押したか計測する方法
アドワーズの仕様変更でキーワードプランナーが悲しいことに…
アナリティクスデータ無期限保存期間を5月25日まで
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!

人気記事

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

ブログ