最近javascriptにも触手を伸ばし始めました。
やりたいことをやるにはjsも無くてはならないですね・・
よくも知らずにjquery貼り付けるだけでなく踏み込んでいきたいと思います。
現在sortableでオブジェクトをドラッグで移動したりする機能は実装していたのですが、
リロードすると戻っちゃうというのが直したかった点でした。
今回やっと実装。→→sorttable を実装したパレット画面
元々基本のデータはクッキーで、お気に入り登録のような感覚で実装して、
jQuery UI – Sortableを使用してドラッグ＆ドロップで移動出来るようにはしていました。
しかし、移動した後にオブジェクトの削除とかすると、残っているものが最初の移動前の位置に戻ってしまう・・
jsで表示上移動した位置情報をどうやって取得するんだろう？？
ということで調べていたら、そもそもSortableのjQueryに、移動した位置を出力してくれるオプションがありました。
——————–
sortable(“serialize” [options])
→並べ替えた順番で、Sortable アイテムに設定されたIDから、フォーム送信やajax送信できるようにシリアライズします。
sortable(“toArray”)
→Sortable アイテムのIDの配列を返します。
（参考：jQuery UI – Sortable）
——————–
そしてここからが苦労どころ。
jsでゲットした情報をphpの変数に入れたい・・
js→→phpの値受け渡しは、ざっと調べたところ、
postやgetのようですね。
submitとかいろいろありましたが、
ajax的なものを使用するのがスマートな感じ。
——————
$( function() {
$( ‘.jquery-ui-sortable’ ) . sortable( {
・・・・
update: function(event, ui) {
var sortlist = $(‘.jquery-ui-sortable’).sortable(‘toArray‘).toString();
$.post(
‘atai_wo_uketoru.php’,
{
‘hairetu’: sortlist
}
);
}
});
$( ‘.jquery-ui-sortable’ ) . disableSelection();
} );
——————
値を受け取るphpファイル（上記だとatai_wo_uketoru.php）にて
$_POST[‘hairetu’]を書いて受け取って、あとは自由に値を触ってクッキーに登録などなどできます。
参考：
[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル
ちなみに上記$.postは、
$_POSTで渡していろいろした結果データを受け取ることができたりします。
非同期通信。ajax。
jQuery AJAX post() メソッド
検索結果とか絞り込み結果を画面再読み込みさせずに表示させることができた。
（トップページの「原色」とかのボタンで使用ajax sample）
今回も最初上手くPOSTで受け取れず、諦めて一回COOKIEに入れるか！と思い
直接JSからCOOKIEにセットすることもやってみたりしました。
Sortable （jQuery UI）の順序をクッキーに記録・再現させる方法
これはこれでできるけれども、
COOKIEに入れる前にあれやこれや値を弄りたければやはりphpにpostやgetで渡すということになったというのが自分の結論です。—–
コメント