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

関連記事

アナリティクスで電話番号タップをコンバージョン計測する方法
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装！
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!
情報量が多いページから一瞬で知りたい情報を見つける方法
SEO Meetupに参加してわかったSEOに大切な５つの事
KPI・KSF・KGIをすっごく簡単に解説

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
夏っぽい色のバナーデザイン
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

[ 認証画像を変える ]


関連記事

スマホ投稿にも使えるWYSIWYGエディッタsummernote
(direct) / (none) が急に増えた！
アナリティクスで電話番号タップをコンバージョン計測する方法
あなたのアナリティクス 正確なデータとれていないかも
情報量が多いページから一瞬で知りたい情報を見つける方法
SEO Meetupに参加してわかったSEOに大切な５つの事

人気記事

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

ブログ