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

関連記事

アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!
アナリティクスを登録する際に絶対しておきたい３つのこと
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装！
アナリティクスで電話番号タップをコンバージョン計測する方法
CSSの背景画像でスライドショーを実装【jQuery】
他社サイトのアクセス数などが分かるサービス

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
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はシンプルに考えるべき！絶対外せない重要な事３つ！
SEOの時代は終わり？店舗型に向いていると思うweb集客
自分で出来る！MEO(ローカルSEO)でやっておくべきこと6つ
他社サイトのアクセス数などが分かるサービス
SEO Meetupに参加してわかったSEOに大切な５つの事

人気記事

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

ブログ