![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
** 概要 [#va1c5ea5] スライドショー販売サイトのユーザビリティ向上のために、写真の順番をタッチ操作で編集できるホームページを作りたい。 *** 仕様 [#j4dc88c1] + 写真の順番変更 + コメントの編集 + データの保存(順番、画像、コメント) + データの呼び出し(順番、画像、コメント) ** 調査[#b445943a] [[→jQuery.clone()>http://semooh.jp/jquery/api/manipulation/clone/_/src-1/]] [[→jQuery.replaceWith()>http://js.studio-kingdom.com/jquery/manipulation/replace_with]] #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]] ** 試作 [#u5c43c14] ** 試作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オブジェクトの操作を可能にした。
