• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み へ行く。
  • 1 (2015-08-19 (水) 21:53:29)

---

FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin

概要 †

スライドショー販売サイトのユーザビリティ向上のために、写真の順番をタッチ操作で編集できるホームページを作りたい。

仕様 †

1. 写真の順番変更
2. コメントの編集
3. データの保存(順番、画像、コメント)
4. データの呼び出し(順番、画像、コメント)

調査 †

→jQuery.clone()

→jQuery.replaceWith()

#ref(): File not found: "jquerymobile-1.png" at page "FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み"

#ref(): File not found: "jquerymobile-2.png" at page "FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み"

TableDnD †

is a jQuery plugin that simply adds drag & drop functionality to tables.

→TABLE DRAG AND DROP JQUERY PLUGIN

How to Drag and Drop in JavaScript? †

→How to Drag and Drop in JavaScript

#ref(): File not found: "howtodraganddropitem.png" at page "FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み"

jQuery RowSorter?.js Plugin Demos †

→jQuery RowSorter.js Plugin Demos

#ref(): File not found: "jQuery-RowShorter.png" at page "FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み"

オープンソースプラグイン †

→Sortable

試作1 †

jquery.ui.touch-punch.js †

jquery.uiのsortable()を使って、タッチパネルの対応を可能にしたプラグイン。

• jquery.mobile
• jquery
• jquery-ui.min
• jquery.ui.touch-punch.min.js

(これがないとスマホでは動かない)

#ref(): File not found: "index-sortable.png" at page "FrontPage/HTML+JS+CSS/jQuery-DragandDropPlugin/PHP+jsonの保存と読み込み"

→DEMO

• 課題
  • Listviews内に配置したコメント用のテキストエディットエリアが選択できない(iphoneで確認。PCでは可能)
  • jquery.ui.touch-punch.jsがなければ、テキストエディットは可能(iphone)。jquery.ui.touch-punch.jsのが、#sortableオブジェクト全体のマウスイベントをハンドリングしているように見える。どうにか、テキストエディット上のマウスイベントを別でハンドリングできないものか。。

試作2 †

• jquery.rowsorter.jsを解像して、jquery.mobile.listviewsのul,liオブジェクトの操作を可能にした。