jQuery :: ネストしたリスト + ui.sortable.js :: ウェブデザイナーの日記

jQuery :: ネストしたリスト + ui.sortable.js

2009/9/28 (Mon) at 12:30 pm

jQueryのuiはべんりなオモチャパックというかんじでいろいろそろってます。sortable.jsをときどき使うのですが、ネストしたリストでこれを使うと、動きがままならないときがあって、jumpyというんですかね、要素をドラッグして移動させようとすると、ビョーンとへんなところにいっちゃうときがある。ネストしたもんじゃなければパーフェクトなのですが。。オプションの中にconnectWithてのがあって、これを指定するとソート対象のli要素をあっちこっちにも動かせるようになるわけですが、ネストしてるヤツの場合は、ここに親要素子要素を指定すりゃいいはずなんだけど、なぜかビョーンが発生する。sortableのオプションについて詳しくはこちら↓

UI/API/1.7.2/Sortable/

私の指定の仕方が悪いのだろうかと思ってたのですが、やはり似たようなジタバタをしている方がいるみたいで↓

jQuery UI GROUP - sortables question - nested lists

上のリンクからあれこれ辿ってみたらば、現状において、以下の2つの選択肢があることがわかりました。ふもふも。

その1。ネストしたリスト専用sortable.js改造版↓

JQuery - Nested Sortable

その2。ネストしたリストで使えるプラグイン↓

nestedsortables

その1の方は、jQueryのuiのsortable.jsに機能追加したもんで、sortable.jsと差し替えて使えます。nestedというオプションが追加されており、さらに、serializeとmaxLevels、maxItemsてのが追加されています。私的にはmaxLevelsはかなり欲しかった機能なのでおぉおおおと思いました。ネストの深さを指定できるのですね。これはよさげ。さっきダウンロードしようかと思ったらリンク切れてて、なんだと思ったらソースの方と比べるとわかるんですが、単純なタイプミスみたい。ソースのヘッダの方をコピペするとダウンロードできますよ。なんか頼りないヤツだなと思いつつ。。。

その2の方は、開発ページの日付を見るとかなり古いんですが、jQuery1.1xの時代につくられたもんですが、1.3でも動きますというんでやってみたら確かに動きました。ちょっといぢった限りだと、これがいちばん私的には動きがいいんですが、どこがどういいかというと、シュッシュッとドラッグしやすいかんじがするからこれがいちばんいいなと思うんだけど、これ、使用ライブラリがアレコレ多い。

あとから追記。その2のヤツはjQuery用のリッチインターフェイス用のライブラリコレクション、InterfaceのSortablesを改造したものってことでした。本家のSortablesについてはこちら↓

http://interface.eyecon.ro/docs/sort

どちらも一長一短で悩ましい限り。jQueryの本家のUIのsortableがver.upして安定してくれたらいちばんいいのですが。

前のエントリへ次のエントリへ

ふ

2009/9/28, 1:11 PM

さっき知り合いのディレクターとしゃべってて、これの話をしましたら「いったいぜんたいsortableをナニに使うのであるか？」と質問されました。普通のウェブサイトでそんな機能はあまり必要ないから不思議に思ったみたいです。私はこれをCMSというか、それほど大袈裟なもんじゃなくても、管理ページのインターフェイスに使います。カテゴリをパパッと変えたりとかですね、あとファイルマネージャー的なもんとかですかね。あとはなにに使えばべんりですかね。

ふ

2009/9/28, 2:10 PM

その後。

その1のヤツを試したらなかなかいいかんじ。ビョーンがなくなったよ。maxLevelsもべんりだし、すばらしい！頼りないヤツなんて失礼なことを書いてしまった。すません。作者の方にお礼のメールをして「リンクちがってますヨ」と書いときました。

ふ

2009/9/30, 12:28 AM

その後のその後。

このエントリで紹介したふたつを入れてみてやってみたところ、どちらもちゃんと動くんですが、後者の方が動きがいいかんじがします。なんていうか、こちらのほうがずりずりとドラッグしやすいような気がする。ブラウザにもよるでしょうが。最後の更新から1年以上経過してますが、jQuery1.3.2で動きます。

またこちらにはネストの深さを指定するmaxLevelというような指定はできないのですが、noNestingClassというオプションがあって、「そこで指定したclassを持つli要素は子カテゴリを持てない」という指定はできるので、ちょっとめんどいですが、ソートをするたびに要素の深さを見て、それがmaxLevelを超えていれば、addClassしていくというメソッドを挟んでやれば同じことが実現できます。

てわけで、私は後者がいいなーと思ったですが、こちらのほうはInterfaceという今後updateされなさそうなライブラリを使っているんで、今後の保守を考えるとあまり使いたくない。。。。開発ページのコメントの中で作者の方は「jQueryのUI移植版もつくりたいのだ！」と述べておられますが、それは1年前の発言でその後音沙汰なし。それでもファンのみなさんは「どーしたまだか？」「おれらでつくるしかないワケ？」てなことをいって口をあんぐり空けて待っているという、誠に悩ましい状況です。

自分でつくればいいじゃん！という選択もありますが、こういうドラッグする系のメソッドって、恐ろしくややこしくて私にはとても手が出ません。だれかがつくってくれるのを待つしかない。。。。

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『<』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

PROFILE

藤居ヒロヤ。ウェブデザイナー／ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

www. http://www.3ot.net/
email. admin [atmark] 3ot.net
phone. 052 323 7376

お問い合わせフォーム