FrontPage / HTML+JS+CSS / jQuery-DragandDropPlugin

概要

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

仕様

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

調査

→jQuery.clone()

→jQuery.replaceWith()

jquerymobile-1.png
jquerymobile-2.png

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

howtodraganddropitem.png

jQuery RowSorter?.js Plugin Demos

→jQuery RowSorter.js Plugin Demos

jQuery-RowShorter.png

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

→Sortable

試作1

jquery.ui.touch-punch.js

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

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

index-sortable.png

→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オブジェクトの操作を可能にした。
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: fileindex-sortable.png 74件 [詳細] filejQuery-RowShorter.png 72件 [詳細] filehowtodraganddropitem.png 73件 [詳細] filejquerymobile-2.png 75件 [詳細] filejquerymobile-1.png 76件 [詳細]
Last-modified: 2015-08-19 (水) 00:24:01 (847d)