- 追加された行はこの色です。
- 削除された行はこの色です。
[[FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin]]
** 概要 [#va1c5ea5]
スライドショー販売サイトのユーザビリティ向上のために、写真の順番をタッチ操作で編集できるホームページを作りたい。
AJAXでphp経由でJSONファイルをcsvで保存。
*** 仕様 [#j4dc88c1]
+ 写真の順番変更
+ コメントの編集
+ データの保存(順番、画像、コメント)
+ データの呼び出し(順番、画像、コメント)
** save_ajax.js [#f2727930]
// Save Action
$("#btn-save").click(function(e) {
console.log("--- Save Button .. ---");
var ary_data = g_list_data;
// 送るデータ形式はJSONでなければ、PHP側でエラーが出る.
send_data = JSON.stringify(ary_data);
console.log('send_data',send_data);
// AJAX
$.ajax({
url: "./php/receive_json_save.php",
type: "POST",
//必要ないがサーバ側との整合のために明示しておいた方がよい。
// contentType: "Content-Type: application/json; charset=UTF-8",
// 必要ないがサーバ側との整合のために明示しておいた方がよい。
// dataType: 'json', //受信形式
data: send_data
}).success(function(data, status, xhr) {
console.log("--- << 通信成功!! >> ---");
console.log("success!!");
console.log("data =" + data);
console.log("status =" + status);
console.log("xhr =" + xhr);
}).error(function(xhr, status, error) {
// 通信失敗時の処理
console.log("--- << 通信失敗!! >> ---");
console.log("error !!");
console.log("status =" + status);
console.log("error =" + error);
}).complete(function(xhr, status) {
// 通信完了時の処理
console.log("fin");
console.log("status =" + status);
});
});
** 調査[#b445943a]
** json_save.php [#t2a9b4b3]
[[→jQuery.clone()>http://semooh.jp/jquery/api/manipulation/clone/_/src-1/]]
[[→jQuery.replaceWith()>http://js.studio-kingdom.com/jquery/manipulation/replace_with]]
<?php /* Version 2 */
// TRUEの場合、デバッグを出力.
$RESPONSE = TRUE;
/******************************************/
// DEBUG用のサブ関数
/******************************************/
function print_response($str){
global $RESPONSE;
if($RESPONSE){
print_r($str."\n");
}else{
// print_r("false");
}
}
/******************************************/
// JSONファイルの読み込み
// * JSONファイルは連想配列に変換
/******************************************/
$json_str = file_get_contents("php://input");
# 第二引数がtrueの場合、連想配列になる
$json_obj = json_decode($json_str, true);
/******************************************/
// ファイルオープン
// * ファイル名はYYYYMMDDHHMMSS.csv
/******************************************/
date_default_timezone_set('Asia/Tokyo');
$SAVE_DIR = "./data/";
$file_name = $SAVE_DIR.date("Ymd_His").".csv";
print_response("\$file_name =".$file_name);
// ファイルのオープン
$fp = fopen($file_name, 'w');
/******************************************/
// 連想配列を整形し、csvに保存
/******************************************/
if($fp){
foreach($json_obj as $i => $arrays){
/* 方法 1 */
// $field = array($arrays["number"], $arrays["name"], $arrays["comment"]);
// $STATE_CSV = fputcsv($fp, $field);
/* 方法 2 */
// 連想配列のvalueをcsv形式に整形
// * 連想配列の値を取得する方法 array_keys($ary), array_values($ary)
$field = @implode(",", @array_values($arrays));
$field = $i.",".$field."\n";
$STATE_CSV = fputs($fp, $field);
// デバッグログ出力
print_response($field);
}
}else{
print_response("Error: fopen()\n");
}
// ファイルクローズ
$STATE_FCLOSE = fclose($fp);
/******************************************/
// エラー処理
/******************************************/
if(!$STATE_FCLOSE){
print_response("Error: fclose($fp)\n");
}
if(!$STATE_CSV){
print_response("Error: fputcsv()\n");
}
?>
** json_load.py [#l6b1dd58]
#ref(jquerymobile-1.png,,30%)
#ref(jquerymobile-2.png,,30%)
*** TableDnD [#ze79ee8e]
is a jQuery plugin that simply adds drag & drop functionality to tables.
[[→TABLE DRAG AND DROP JQUERY PLUGIN>http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/]]
*** How to Drag and Drop in JavaScript [#wa9c9d16]
[[→How to Drag and Drop in JavaScript>http://www.webreference.com/programming/javascript/mk/column2/3.html]]
#ref(howtodraganddropitem.png,,50%)
*** jQuery RowSorter.js Plugin Demos [#g0521224]
[[→jQuery RowSorter.js Plugin Demos>http://www.jqueryscript.net/demo/jQuery-Plugin-For-Drag-n-Drop-Sortable-Table-RowSorter-js/]]
#ref(jQuery-RowShorter.png,,50%)
** オープンソースプラグイン [#mc2993ee]
[[→Sortable>http://forresst.github.io/demos/sortable/en/index.html]]
** 試作1 [#u5c43c14]
*** jquery.ui.touch-punch.js [#kd023e63]
jquery.uiのsortable()を使って、タッチパネルの対応を可能にしたプラグイン。
-- jquery.mobile
-- jquery
-- jquery-ui.min
-- [[jquery.ui.touch-punch.min.js>https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js]]
(これがないとスマホでは動かない)
#ref(index-sortable.png,,30%)
[[→DEMO>http://weddingmovie.fififactory.com/photo-selector/dev/index-sortable.php]]
- 課題
-- Listviews内に配置したコメント用のテキストエディットエリアが選択できない(iphoneで確認。PCでは可能)
-- jquery.ui.touch-punch.jsがなければ、テキストエディットは可能(iphone)。jquery.ui.touch-punch.jsのが、#sortableオブジェクト全体のマウスイベントをハンドリングしているように見える。どうにか、テキストエディット上のマウスイベントを別でハンドリングできないものか。。
** 試作2 [#k54a996a]
- jquery.rowsorter.jsを解像して、jquery.mobile.listviewsのul,liオブジェクトの操作を可能にした。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
